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: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.
Noticethisfixusespseudo-elements(whichwebrieflyintroducedin Chapter1 , )andacouple
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
Search WWH ::

Custom Search