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”
@Martin: interesting because most of the time floats also need to be cleared in non-IE browsers, which is something that
zoom:1can’t really do.Of course Jeff, you know it’s know the zoom property which is doing the “clearing”.
I simply prefer this solution to yours because it’s less obtrusive (although the obtrusion is not visible and works just as fine).
It all boils down to the personal preferences and the layout-in-development.
I thought
zoomwas proprietary exclusive to Microsoft, meaning that it is insufficient to clear floats in anything other than IE. So yes, it does the clearing, but only for IE, correct? To clear floats in all non-IE browsers, additional code is needed (e.g., the:afterrules in the clearfix method. Or maybe I have been slurping too much cough medicine..?Uhh, I only hope we understand each other correctly ;)
Back in the days I used to manually insert a clearing span after the floats I wanted to clear, which was my bulletproof and cross-browser implementation of the :after trick.
But lately I am very much into
overflow: hidden;, which is much simpler, and allows a container to have as many floats inside it and still not loose its height, meaning that it acts as a float clearer. So all we just add thezoomfor the IE.I am sure you know everything I’m talking about here, but for illustration purposes, here are some live examples I just sketched up: http://martin.saulis.com/test/floats.html
So, I am not arguing the different tricks to achieve a desired result — I am solely expressing my opinion on the advantages of using a simpler approach ;)
@Martin: lol! Okay so now you’re talking about the
overflow:hiddenmethod? What about your “all I need”zoom-only method..? I’m feeling cheated here.In any case, I think we have pretty much hammered the whole
overflow:hiddenthing to death in this comment thread, so no need to waste any more time regurgitating stuff.@Jeff: “In most cases .clearfix { overflow: hidden; zoom: 1; }” I think he made it pretty clear he was talking about using the overflow: hidden method, while using zoom for ie only.
whoa! yes, you are correct – I totally did not see that
overflow:hiddenwas included in there. Apologies to Martin – everything makes sense now. You are correct on all points – apparently my cold medicine is a little too strong.Now please kick me in the lower jaw for good measure ;)
Lol no kicking needed I believe. For what it’s worth I rather just add clearing rules to individual selectors via mixins with whatever your preference in css frameworks is. keeps everything 101% semantic and is easier to maintain than using a clearfix class.
Can I get some opinions re this clear technique…I’m using it with success:
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}thanks for you input,
Eric
@Eric: Please try next time to read the article first and then post a comment. If you had read the article you would have recognized, that you posted a part of the original clearfix-hack which the article discussed top modernise. Reading and thinking doesn’t hurt, you know?
Eric, yeah that is a part of the original (old) clearfix article on which this method improves imho.
I don’t use clear fix, learned to avoid that piece