HTML and CSS Reference
In-Depth Information
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
child elements.
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
clear: right;
causes an element not to be displayed until the right margin is clear of fl oating objects.
See Figure 4-22.
Figure 4-22
Clearing a fl oat
float: right;
float: right;
clear: right;
original layout
floating the element on the
right margin
last element is displayed only
when the right margin is clear
Search WWH ::

Custom Search