Reference and Manual
Hosting Glossary
PHP
HTML 4.01
CSS 2.0
Core Javascript 1.5
XHTML 1.0
Cascading Style Sheets(CSS) Level 2
Long description of float and text flow example
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.
