Super Plugin Sale! Your Choice: BOGO or 30% Off »
Web Dev + WordPress + Security

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.

About the Author
Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
SAC Pro: Unlimited chats.

149 responses to “The New Clearfix Method”

  1. TJK, thanks for your version, I was initially excited with your version and was all set to write a “mixin” which was a width based either/or scenario, but I *think* your demo is flawed? your demo doesn’t actually have floats in the containers, and as soon as there is, all versions work identically, ALL do not contain the bottom margin :(

    also there’s something about the whitespace within the <pre> tags in samples 1 & 3, (poor perishable loses it’s bottom space because the space it’s not in the <pre> in one scenario anyway) – in other words, all things are not equal in your demo, but even if all things are equal your demo does “appear” to be true :

    but as soon as you float the internal contents, – the whole point of clearing anyway – IE7 and below lose that bottom margin, AND all versions in ‘good’ browsers are again identical:

    so your version is no better or worse than others, which is a shame I thought you’d hit on something, and just a FYI the same happens with the width + display: inline-block method, which is what I was hoping to toggle between..

    I generally use the float in a float, or display:inline-block method (no after/before code for me!) but seeing as it too suffers the the same so I will continue to use whichever method suits the situation and IE7 will just have to do without their bottom margin!

  2. Sevil YILMAZ 2011/04/01 12:51 am

    Hi Jeff,

    Thanks for the new approach. But I wonder why you used

    * html .clearfix { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */

    instead of

    .clearFix {display:inline-block}
    .clearFix {display:block}

  3. Sevil YILMAZ 2011/04/02 2:08 pm

    Hi again,

    I noticed that using content:" " property is causing the extra margin problem in Firefox 4.0.

    I solved that using the code like this:

    Would you have noticed it?

  4. Tiniest update to this…

    content: " ";

    can be

    content: "";

    doesn’t even need the space.

  5. This was really an attention-grabbing topic, I am very lucky to be able to come to your weblog and Ill bookmark this web page so that I might come back another time.

Comments are closed for this post. Something to add? Let me know.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
GA Pro: Add Google Analytics to WordPress like a pro.
All free plugins updated and ready for WordPress 6.6 dropping next week. Pro plugin updates in the works :)
99% of video thumbnail/previews are pure cringe. Goofy faces = Clickbait.
Crazy that we’re almost halfway thru 2024.
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.