New Bookstore! Save 20% on books with discount code: LAUNCH
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.

Jeff Starr
About the Author
Jeff Starr = Creative thinker. Passionate about free and open Web.
BBQ Pro: The fastest firewall to protect your WordPress.

149 responses to “The New Clearfix Method”

  1. Jeff I think you should call it “A cleaner clearfix” instead of “The new clearfix” ;) my 2¢

  2. Jeff Starr

    iPad, that sounds good too, but I want to emphasize that the old way of doing it is no longer necessary, and that we have a new and improved method. Although I’ll admit that “cleaner clearfix” does sound nice ;)

  3. Seems too complicated… I used to use the overflow method, but I just float the parent div, then it wraps all child floats…

    so:

    div “content” is floated left inside the “wrapper” div. Content div will wrap around the two “left and right” floated divs… so you can add a border etc etc… simple. Works everything for me…

  4. Jeff Starr
    Jeff Starr 2009/12/09 2:28 pm

    @a guy: yes, the FNE (Float Nearly Everything) method is another viable method for clearing floats, but unfortunately there are many situations where floating everything is not an option. It all depends on the needs of the design, so it’s good to have a variety of options available.

  5. iVane Hwang 2009/12/10 1:12 am

    I alway do like this:

    .clearfix {zoom:1;}
    .clearfix:after {content:""; clear:both; display:block; height:0;}

  6. Someone can correct me if I’m wrong, but I think you avoid that because the zoom:1 property doesn’t validate and needs to be fed only to IE on conditional stylesheets.

  7. I use

    .clearfix:after {
          content: "EasyClear";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
    }

    html>body .clearfix { display: block; }
    .clearfix { display: inline-block; }
    * html .clearfix { height: 1%; }

    Valid CSS (“zoom” isn’t).

  8. My version:

    /* Clear Fix */
    .fix:after {
          content: '[.]';
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
    }
    .fix {
          display: inline-block;
    }
    /**/
    .fix {
          display: block;
    }

  9. All the retards trying to explain how the clear differently – youre retards who arent good front-end developers. Use clearfix, thank me later – you should have known about this for 3 years.

  10. Is this really a new method, or have you just taken what people have been doing for years and removed all references to IE5?

    I’m not seeing anything “new” here.

  11. Victor Nogueira 2009/12/12 10:42 am

    I don’t know why people care so much about validating their code. To me it’s like an obsessive—compulsive disorder.

    Don’t get me wrong, I always validate my HTML/CSS, but I just ignore obviously invalid properties such as “-moz-border-radius” or “zoom”. zoom: 1 is just fine. It doesn’t screw anything, it stays quiet and safe.

    I understand coders who avoid non-semantic classes, though. I’m part of this group, but I make some exceptions, as I always use classes like “hidden” (for image replacements) and “clearfix”, as it saves me a lot of time.

    Anyway, thank you for the update. I’m already using it.

  12. Caring if your css validates is old school and pointless.

Comments are closed for this post. Something to add? Let me know.
Welcome
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 »
The Tao of WordPress: Become your own WordPress guru.
Thoughts
Book updates complete! DigWP, .htaccess, Tao-WP, and WP Themes books all updated and current with all the latest.
Stop giving so much juice to social media. Get a site and OWN your content.
I would give my left testicle for macOS Finder to remember column widths.
The chemical name for titin (the largest known protein) has 189,819 characters and takes several hours to pronounce.
Working on book updates, should be available for download sometime next week.
iCloud is like the Terminator. It will never stop trying to get your data. An endless fight on each Apple device to keep iCloud disabled and empty.
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.