Spring Sale! Save 30% on all books w/ code: PLANET24
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. Book Author. Secretly Important.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

149 responses to “The New Clearfix Method”

  1. Marc Watts 2010/06/27 7:49 pm

    @Thierry Koblentz

    Thanks for your reply again.

    Would you have an example website that you think would break my clearfix? I’ll need to do some tests to check what you are saying. So far I have had no problems using the fix.

    I may have to look into this further.

    Marc

  2. Hi someone find a bug in ie7(I think it is not about float, but hope the new clear can fix it, because additional clear div can fix it), cann’t give the margin-bottom 10px yet. The code as follow:

    Try

    .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 */

  3. sorry the > < be clear

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Try</title>
    <style type="text/css">
    .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 */
    </style>
    </head>
    <body>

    <div style="width:600px;border:1px solid #69C;" class="clearfix">
           <div style="width:480px;height:24px;background-color:#69C; margin:10px; float:left;"> </div>
    </div>

    </body>
    </html>

  4. Marc Watts 2010/07/04 8:36 pm

    If you’re having problems with vertical margins then I would recommend using padding instead. It eliminates any collapsing problems.

  5. Thierry Koblentz 2010/07/05 6:55 am

    @avajayam

    This is a IE6/7 bug. afaik, to create space below the float you’d need to use padding on the wrapper rather than margin on the float.
    Note that this has nothing to do with margin collapsing.

  6. Thanks Marc and Thierry(Great).

  7. Website design chennai 2010/07/12 10:09 pm

    Thanks to Jeff Starr sharing about new The New Clearfix Method..Fine

  8. I’m sorry to ask such a newbie question but my head is swimming. How does this work out in the HTML?

    This works for me in Firefox but I don’t know if this works in IE.

    <a href="index.html" rel="nofollow">Home</a>
    <a href="../store/index.html" rel="nofollow">Store</a>

    <!-- end of navigation div -->

    or should I say

    Thank you.

  9. Sorry. Code didn’t work after I hit submit button, I’ll try again.

    In HTML would I use:

    <div id="navigation.clearfix">
         <ul id="navigation">
         </ul>
    </div>

    or

    <div id="navigation.clearfix:after">

    Lastly, how are people able to type the lesser than and greater than symbols?

    Thank you.

  10. Jeff Starr 2010/07/28 2:55 pm

    Hi Dawn,

    I tried rescuing your code, but it looks like WordPress pretty much mangled it. The easiest way to ensure your code stays intact is to wrap each line (or term) with <code> tags. Something like this:

    <code><div></code>
           <code><p></code>
           <code></p></code>
    <code></div></code>

    I hope that helps. Feel free to repost your code using that method. The less-than and greater-than symbols should display just fine with the code tags.

  11. Rofl_Waffler 2010/08/05 9:38 pm

    The content attribute can take an empty string, so I suggest simply:

    .elem:after { content: ""; display: block; clear: both; }
    .elem { zoom: 1; } /* in IE stylesheet, or selector hacks as desired */

    I’ve been using this for years without problems.

  12. Hi Jeff,

    I’m wondering if Rofl_Waffler’s shortened version of your clearfix method is meanwhile confirmed?

    visibility: hidden;
    font-size: 0;
    height: 0;

    were only needed to hide the orignal period resp. dot used with the content property, correct? If so, we should have a new winner here…!?

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 »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Thoughts
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.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.