HTML and CSS Reference
Floating Elements and the Great Collapse
By default, elements are rendered in the page based on the element hierarchy in the
HTML file. For example, a child element is positioned within its parent element in the
Web page. However, this does not happen when you float an object; instead, the floated
element is untethered from its parent element.
This can lead to some surprising results. For example, a parent element with all of its
child elements floated has no content in the rendered page and collapses down to an
empty element with zero height. If you're counting on using a parent element to set the
background color for all of its floating children, you're out of luck unless you explicitly
define a height for the parent that's large enough to provide a background for all of its
Clearing a Float
Sometimes you'll want to prevent an object from wrapping around a fl oating element; or
in the case of a row of fl oats, you'll want to ensure that the following element appears
after the row is completed. To place an element below a fl oat, you use the style
clear: position ;
where position is none (the default), left , right , or both (to ensure that both margins
are clear of fl oating elements). For example, the style
causes an element not to be displayed until the right margin is clear of fl oating objects.
See Figure 4-22.
Clearing a fl oat
floating the element on the
last element is displayed only
when the right margin is clear