Latest TweetsVerify any search engine or visitor via CLI Forward-Reverse Lookup perishablepress.com/cli-forwar…
Perishable Press

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-table display 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:block to 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.

Jeff Starr
About the Author Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
Archives
149 responses
  1. JohnONolan April 11, 2010 @ 3:10 pm

    @Jeff it basically totally stops the clearfix from working and stuff goes floating all over the place – I’m on Mac FF if that makes any difference (it shouldn’t though)

  2. Andee Know April 13, 2010 @ 6:13 am

    For a long time searched for something similar. Thanks!

  3. that was very helpful, indeed. thanks a lot!

    I tried overflow:hidden but it still screwed up my layout. It’s fine and dandy now :)

    My question is if this is really a fix (meaning a remedy to the cause of a problem), or rather a fix (meaning work-around to cover up a pile of mess)? :D

  4. Thank you, clearfix solved my problem!

  5. Jeff Starr

    @JohnONolan: Thanks, I’ll run some tests and check it out. In the meantime, I would like to note that I am using this clearfix method here on this site and it works as stated in latest Firefox (currently 3.5.9).

  6. The strength of this method – its simplicity. After all, as they say – all brilliant – just.

  7. Why so difficult? It can be done much easier:

    /* new clearfix */
    .clearfix:after {
         clear: both;
         display: block;
         height: 0;
         content: "";
         }
    *html .clearfix { zoom: 1 } /* IE6 */
    *+html .clearfix { zoom: 1 } /* IE7 */

  8. Jeff Starr

    GreLI, here is some of my reasoning for the additional rules.

  9. Thierry Koblentz June 13, 2010 @ 12:46 pm

    fwiw, my advice is to avoid using “clearfix”, because it has the potential to create more issues than it can solve.

    http://carsonified.com/blog/design/everything-you-know-about-clearfix-is-wrong/

  10. Jeff Starr

    Thanks Thierry! Looks like some great advice :)

  11. Martin Chaov June 13, 2010 @ 9:36 pm

    Or you can just use overflow: hidden; on the container as listed in specs (http://www.w3.org/TR/CSS2/visuren.html), and never again use hack to fix issues that do not exist…

  12. Jeff Starr

    The issues definitely exist, unfortunately. As discussed quite thoroughly in this thread, different methods have different shortcomings, but it is nice to have a variety of solutions available for those tricky cases.

[ Comments are closed for this post ]