HTML and CSS Reference
In-Depth Information
What we might normally expect to happen here is that the background appear green and a
full red outline appear around all the contents of the
.main
element. But all we see is a 2px
horizontal line at the top of the
.main
element.
This happens because of the floated child elements. When one or more elements are floated,
unless other non-floated elements are present, the parent element of the floats will effectively
collapse, behaving like there's nothing inside it. All that needs to be done is remove one of
the float declarations, and the full green background and red outline will appear as expected.
So in order to remedy the situation, floats need to be “cleared.” We can do this by adding a
new section of code to our styles.css file:
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1; /* for IE6 and IE7 */
}
This float clearing method (often referred to as a “clearfix,” hence the
cf
class selector,)
comes again via
Nicolas Gallagher.
Don't be intimidated by what you see here; you don't
have to understand everything in this chunk of code. Once we have this in our stylesheet we
just need to add a class of
cf
to any element that collapses due to floats.
of new properties, including the
clear
property.
The
clear
propertypreventsanelementfrombeingaffectedbyfloatedelementsthatappear
before it. Floats generally cause all other elements to wrap around them, making them bump
up against the side opposite the float direction. But adding the
clear
property to subsequent
