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”
@Jeff Starr,
There are several known case when one could or need to use another method of clearing floats, but as I’ve said before – overflow:hidden; fixes most common cases and by specification must be used on containers with floated children.
Have I mentioned that as this is from the box model specs it is supported even by our beloved IE6 (also lesser versions but they do not concern us).
There isn’t need for different methods and their shortcomings :).
two simple ways of clearing floats – clear: both assigned to the element that goes after your floated queue, if the case is special and overflow: hidden; on the container when the case is general.
I’d go with overflow + dimension.
Again, the
overflowmethod definitely works in some situations, but there are good reasons why it isn’t a one-size-fits-all solution for clearing floats. Read through the thread for the full discussion, or check out these links for more information:Andy Ford explains why he’s saying goodbye to the overflow:hidden hack (404 link removed 2012/06/09).
Snook tweets
http://twitter.com/snookca/status/6532105759some additional downsides to theoverflow:hiddenhack.Snook tweets that
http://twitter.com/snookca/status/6531243562he useszoomfor IE.Here is another situation where overflow fails.
Yes, the overflow fix also works great in many scenarios, and is my preferred method as well, but there are situations in which it leads to further design complications. Good examples include missing vertical scrollbars on small windows, problems with borders, padding/margin issues, outline issues, and lots of other subtle nuances. Basically, any properties made possible with some sort of a visible overflow are eliminated once you change it to hidden. This can lead to all sorts of gotchas, especially in complex layouts. Other cases where the overflow method fails is when widths or heights cannot be set explicitly, which in my experience is in a fair number of situations.
Update: It looks like Mr. Snook deleted those tweets, but he did say it.
Update: Here is proof: http://dvlprs.com/snookca/statuses/6532105759
Update again: It looks like the missing tweets happened because of a Twitter issue. My apologies to Mr. Snook for implying otherwise.
The best way to use a clearfix can be found at best clearfix ever (2012/05/21: 404 link removed). It doesn’t use class names to fix the problem but an automatic solution that should be applied to all block level elements except for the p and footer elements.
@Marc
Best clearfix ever1? You must not be serious.
Do you understand that your rules will create very different constructs across browsers?
For example, you give a layout to DIVs (
div {zoom:1;}) but these do not create block formatting contexts in modern browsers.Try to nest a bunch of DIVs and apply vertical margins to them, you’ll see that in IE 6 and 7 these margins will *not* collapse.
Check everything you know about clearfix is wrong (404 link removed 2014/10/22) to understand why your rules will break many layouts.
1 (2012/05/21: 404 link removed)
Are comments working again?
Marc Watts, there is no way that is better. Just looking at it scares the shit out of me.
@Jeff
Regarding Jonathan Snook’s tweet. I believe this is not really related to the issue since “
overflow:hidden” is not a technique, but a trigger.The technique itself has to do with block formatting contexts, so authors can implement the method using other triggers.
In short, it is not clearfix vs.
overflow:hiddenit is clearfix vs. block formatting contextsAlso, if
overflow:hiddenaffects printing then authors can easily reset this styling in their print styles sheet.Lastly,
overflow:hiddendoes not always cut-off content outside the element’s boundaries. It really depends on constructs.Thierry, you say:
Completely agree. I think the best thing to keep in mind is that different layouts require different solutions. There is no need to think in terms of “this vs. that” – it’s simply a matter of understanding the pros and cons of any clearing method and then using the best tool for the job.
@Jeff
I agree, there is nothing authors should disregard. It’s a jungle out there and we need all the tools we can put our hands on.
I use the clearfix method myself, but in very rare occasions.
My addition to this technique is the use of padding declarations (padding-top:1px;padding-bottom:1px;). This is to make sure the vertical margin of the first and last child of the block will not collapse in modern browsers. I added this to the original rule because zoom:1 prevents margin collapsing. That way things look the same in all browsers.
@Thierry Koblentz
Thanks for your reply. I have seen your article on carsonified.
I just briefly checked it out again so correct me if I am wrong but you have 3 div elements with the two sides ones floated and the one in the middle is not floated.
To fix the problem that you have shown, you just need to float the middle div. Unless your using liquid layouts (which I don’t see anyone using anymore), then I see no reason why you wouldn’t float the middle div.
If you do then my technique still works. I suppose this means that I create websites in such a way that it works with my clearfix solution.
@Marc Watts
If I pointed you to the article it was not in relation to a particular layout, but to what this method does to blocks.
You are giving a layout to all these elements:
article, aside, div, form, header, nav, section, and ul
This is what this means for IE 6 and 7:
1. these blocks will contain floats,
2. the border box of these blocks will not overlap floats,
3. the vertical margin of the first and last child of these blocks will not collapse.
In modern browsers, your styling will only trigger #1.
But #2 is the killer here, because – in these blocks – clearing a nested element will clear outside of the block in modern browsers, but not in IE.
For the same reason, the border box of these blocks will be different across browsers.
If your technique works (which I doubt) the way you create web sites, then it may be the best method for you, but it’s certainly not “the best clearfix ever” (as you claim).