Example 1:

<div style="line-height: 20px; width: 200px;">
   <div style="float: left; height: 20px; width: 100px;"></div>
   text text text text text text text text text text text text text
</div>

Only one line box is shortened by the float; in particular, the second is not shortened.

Example 2:

<div style="line-height: 20px; width: 200px;">
   <div style="float: left; height: 0; width: 100px;"></div>
   text text text text text text text text text text text text text
</div>

Example 3:

<div style="line-height: 20px; width: 200px;">
   <div style="float: left; height: 10px; width: 100px;"></div>
   text text text text text text text text text text text text text
</div>

line boxes created next to the float are shortened to make room for the margin box of the float
coming from CSS 2.1, section 9.5 Floats