HTML and CSS Reference
In-Depth Information
When you use the
clear
property in CSS, you are telling the user agent or browser to no longer
honor previous floats at that level. It's like wiping the slate clean and starting fresh. You can
specify whether just the elements that are floated to the right or left are affected or, as we've
done here, on both sides.
However, markup purists don't like this approach because sometimes it necessitates
inserting a
div
that is not used to contain anything at all—it's simply there as an element that
you can “do stuff to” in CSS. Wouldn't it be nice if you could remove this superfluous clearing
element and still have the layout you wanted?
Fortunately, there are methods for doing this:
•
Floating nearly everything
•
Using easy clearing
Using the
overflow
property
•
Floating Nearly Everything
The first method we'll look at involves floating nearly everything on the web page. If you have
two floated elements, as in our example, you can float the parent container, which then has
the effect of pulling it back around the inner
div
s. But what happens to that container you've
just floated? Figure 7-27 shows the result (we show another parent container to help clarify).
Figure 7-27.
A cleared float inside a collapsed float
The second parent container has been floated, as have the two blocks inside. However, it
appears we have solved one problem while introducing another—the outer parent container
has now collapsed in.
Your floated content could be nested many levels down in the document tree, so as you go
back up each level floating elements, the secondary effect continues. Eventually you end up
having floated nearly everything in the document, as Figure 7-28 shows.
