Long description of float and text flow example

This diagram illustrates how text flows around a float, and in particular, how line boxes of content alongside a float are shortened to make room for the float box (including margins). The HTML source of the example precedes the image. In the source document, a BODY element contains a P that contains a left-floated IMG.

The top of the illustration reads "max (BODY margin, P margin)" to indicate that vertical margins collapse. However, the IMG margin is not involved with this calculation since the IMG is floated.

At the left side of the illustration, the left margins of BODY, P, and IMG do not collapse (horizontal margins don't collapse).

The paragraph text flows along the right side of the IMG, starting at the top and to the right of its right margin. When the text reaches the bottom of the IMG bottom margin, it continues as it would normally within a P element. Thus, line boxes alongside a float are shortened.

Return to image.