HTML and CSS Reference
In-Depth Information
Figure 6-2. Our noncleared float ignores the container borders.
Clearly this doesn't work (no pun intended . . . well, mostly), so let's examine our “easy
clearing” solution:
.clearfix:after {
/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
/* End hide from IE-mac */
Let's review what's going on under the hood. The first rule ( .clearfix:after ) uses the
:after pseudo-element to generate content after our containing block, and the declarations
create the content (a period in this case), change the display from the default inline to block
(the clear property cannot be applied to inline elements), make the generated content disap-
pear ( height:0; and visibility:hidden; ), and of course, clear any floats no matter which side
they are on. The last part should be familiar from the Holly hack (because it is the Holly hack),
and sends IE/Win a height to give the container element “layout,” which causes IE to expand
the container div to surround the floated box.
The only change needed in our (X)HTML is adding the class clearfix to the container
div , like so:
<div class="container clearfix">
The result keeps the markup clean, works in all modern browsers, looks exactly how you might
expect it to (see Figure 6-3), and is a much cleaner way to clear those floats of yours.
Search WWH ::

Custom Search