HTML and CSS Reference
In-Depth Information
I could show you many different ways to work around this situation, and if you were to ask a few web designers and
developers, they all would probably give you a different answer as to which technique they use. Remember that
float
and
clear
weren't created for the purpose of columns, so there's no explanation in the CSS specification of
how to achieve this effect. Ideally, the best technique is the easiest to implement while not breaking any rules of
good practice. With this in mind, I personally use and recommend a technique that has evolved over time and even-
tually been given the name
micro clearfix hack
by Nicolas Gallagher, who has worked to make this particular tech-
nique as small and efficient as possible. You can read about his work on it at
ht-
The micro clearfix hack in all of its glory:
.group:before, .group:after {
content: “”;
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
You may see this code used elsewhere on the web with the class name “clearfix” or “cf” for short. I personally
prefer to call the class “group” to show that it contains a group of elements (acting as columns).
By using this CSS, you can give an element containing floating elements the class named
group
to fix the issue.
The main container already has the class
group
, so add this fix to the CSS:
1.
In styles.css, below the
body
rule set, add the following:
.group:before, .group:after {
content: “”;
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
2.
Save styles.css.
The page now looks as intended, as it did in Figure 8-6 but with a more robust clearfix solution applied to it, but
what exactly is that CSS doing?
It's using some properties yet to be covered:
