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 {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/* 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.
