The New Clearfix Method
Say goodbye to the age-old clearfix hack and hello to the new and improved clearfix method..
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. I have written previously about the original clearfix method and even suggested a few improvements. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. Specifically, Internet Explorer 5 for Mac is now history, so there is no reason to bother with it when using the clearfix method of clearing floats.
The original clearfix hack looks something like this:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */Yes it’s ugly, but it works very well, enabling designers to clear floats without hiding overflow and setting a width or floating (nearly) everything to get the job done. The logic behind this hack goes something like this:
- Target compliant browsers with the first declaration block (if all browsers were standards-compliant, this would be the only thing needed) and create a hidden clearing block after the content of the target element.
- The second declaration applies an
inline-tabledisplay property, exclusively for the benefit of IE/Mac. - At this point, we use the comment-backslash hack to hide the remainder of the rules from IE/Mac. This enables us to do the following:
- Apply a
1%height only to IE6 to trigger hasLayout (which is required for the hack to work) - Re-apply
display:blockto everything except IE/Mac - The last line is a comment that serves to close the hack for IE/Mac
As you can see, that’s a lot of fuss over a browser that has been dead for at least the last three or four years. Nobody uses IE/Mac anymore, so it is time to drop it from the clearfix hack. The result is a much cleaner and more efficient slice of CSS:
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */Stripping out that IE/Mac cruft cleans things up real nice. Notice that we have further improved the clearfix hack by adding support for IE7. Neither IE6 nor IE7 support the :after pseudo-class used in the first declaration, so we need an alternate method of applying the clearfix. Fortunately, applying zoom:1 to either browser triggers IE’s proprietary hasLayout mechanism, which works just fine to clear the float. For expediency’s sake, we accomplish this with a couple of valid browser-specific selectors, but you should be advised that conditional comments are the recommended way to go.
Fortunately, IE8 supports the :after pseudo-class, so this new clearfix method will only become more simplified as IE6 and, eventually, IE7 finally die off.
Bottom line: The new clearfix method applies clearing rules to standards-compliant browsers using the :after pseudo-class. For IE6 and IE7, the new clearfix method triggers hasLayout with some proprietary CSS. Thus, the New Clearfix method effectively clears floats in all currently used browsers without using any hacks.
149 responses to “The New Clearfix Method”
Hi Jeff,
This is a “newer” clearfix method that takes care of collapsing margins:
.clearfix:before,.clearfix:after {content: ".";display: block;height: 0;visibility: hidden;}.clearfix:after {clear: both;}.clearfix {zoom: 1;} /* IE < 8 */Demo comparing three methods:
http://www.tjkdesign.com/lab/clearfix/new-clearfix.html
Article:
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
@Thierry, why did you drop the ‘font-size:0’ on your ‘improved’ clearfix in #133? When you take it out, you can get a 12px margin at the bottom of the page if you’re using the clearfix on a full-page ‘wrapper’ element. This makes sense as you’re adding a ‘.’ after the wrapper. Put ‘font-size:0’ in and the margin goes away.
@josh, I get the collapsing margins issue with Rofl_Waffler’s method so I think Thierry’s improved solution in #133 (with font-size:0 added) is the soundest approach.
@Darren
If I am not using font-size:0 it is because my solution relies on overflow:hidden, hence there is no need to bother with font-size.
Unfortunately, I see that in the article and demo page I wrote “visibility:hidden” *instead* of “overflow:hidden”. I cannot believe I missed that :-(
I’ll make sure to edit the entry on YUIBlog
Thanks for bringing this up
@Thierry, that makes sense and gets rid of the margin. Thanks!
BTW, I’m using .clearfix {min-height: 0;} in my stylesheet to make it compatible with IE7 so I only need to maintain an IE6-specific stylesheet (inserted with a conditional comment). For me, this strikes the appropriate balance between minimizing hacks/conditional comments and maintaining valid CSS.
@Darren
fwiw, I care more for markup than CSS.
I prefer to see my CSS file fail validation than to include junk markup (CC) in my documents (imho, we should not “cheat” with that layer).
Thanks. The new clearfix method is great. I will use it on my next project. Hate ie 6!
This is a great article Jeff! As much as I have used “overflow hidden” in the past, 50% of the time I end up removing that later during development because of some tool-tip or image “nudged” relatively outside of its limits.
I have also learned to not really care too much about the CSS validating anymore. I try best I can of course, but in the end, why? Is what you have in place is needed to make the site work? Sure, it may matter to almost everyone reading this blog, however, explaining to a client that their CSS file validates to W3C’s regulations is about as useful as a plumber explaining to a housewife who just returned from the beauty parlor how he had to route a certain drain through the floor joists.
Just make it work so they say.
thanks for all your work, it’s an amazing source…keep us the good work
Thanks for the update. Thx Jeff.
Hello,
I am somewhat restarter in webdesign after taking a relatively long break.
Anyways, I just can’t seem to use the clearfix with 960 css framework.
Would you guys look et my simple example and let me know what I am doing wrong?
It looks bad in both osx firefox and safari. When I add a clearing div it look sfine, but I would like to avoid using it.
This is my header
t is a long established fact that a reader will be distracted by the
t is a long established fact that a reader will be distracted by the
t is a long
t is a long
My footer
Very sorry for the wrongly pasted code, now it is the bare minimum here:
I am trzing to use this with clearfix
div id="upper_right" class="grid_6 clearfix"instead of putting extra clearing divs like this one
div class="clear" /divBut it is not working. What is the correct way of doing it?
Thx
Thank for the discussion and the new clearfix. I can sleep now.