Clearfix, with an IE7 Solution
While this was an appropriate technique when this article was written (Febrary 2007, when IE7 was just released), much better techniques now exist for clearing floated elements in modern browsers. Consider putting overflow: auto; on the parent element, rather than using the clearfix class described below.
If you begin working with CSS for your web page layouts instead of tables (and you really should), you will encounter problems with floated elements. The most mind blowing issue is when you have floated an element to the left or right, and that floating element escapes OUT of the element that contains it. This behavior is correct, since a floated element is removed from the normal flow of the document, and hence, any elements containing it. Unfortunately, this effect can really can play hell with your web pages - so here I discuss my preferred solution.
This paragraph, with a white border contains a very tall image that is floated to the right of the paragraph, while text flows around on the left side. However, you can see here that the image very rudely busts out of the paragraph element.
There are a variety of ways to correct this, but the most robust method I've found is using Clearfix by PositionIsEverything. First, add a clearfix class to your main stylesheet with the following style declarations.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Then assign the clearfix class to each element from which floated items are escaping. (IE, add the clearfix class to the element that contains your floated element. ) Here's the code for the corrected paragraph:
This is the same image and paragraph as above, except that I've added the clearfix class to the paragraph. Now, the paragraph expands to contain any floated elements.
I find the clearfix class to be a very elegant solution. It fixes the element with the issue (not neighboring elements), and it's very robust and reusable. All you need to do is add a clearfix class to each element that needs to expand to contain a floated element.
There's just two tiny little problems with the solution thus far - Internet Explorer 6 and Internet Explorer 7. They don't support the :after selector, so a bit more code, inside conditional comments, is required. Just place the following bits of code in your HTML, somewhere below the original clearfix declaration.
That is how to corral escaping floated elements using clearfix, including an IE7 solution.
Photograph originally from APOD.
