Latest TweetsGreat post about the latest power grab: www.eff.org/deeplinks/2018/09/…
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 = Creative thinker. Passionate about free and open Web.
Archives
149 responses
  1. Jeff Starr

    @Ionut Botizan: interesting approach. It looks a lot like Dustin Diaz’ minimum-height fix for IE:

    selector {
           min-height: 500px;
           height: auto !important;
           height: 500px;
           }

    Do you think there might be any side-effects in certain conditions when setting the height to zero in IE and ‘auto’ in other browsers?

  2. Ionut Botizan December 15, 2009 @ 3:53 pm

    P.S.: Check your Gravatar settings. My avatar has a PG (Parental guidance recommended) rating. You should use G (General Audience) if you would like to avoid that kind of profanity appearing on your blog.

  3. Jeff Starr

    Thanks for the tip, Ionut, but I thought it was cute and don’t really have a problem with it ;)

  4. Ionut Botizan December 15, 2009 @ 4:32 pm

    The 2 things I can think about are:

    1) The container for the floated elements has overflow set to hidden or auto.
    In this case, IE6 will apply the overflow and height rules, so it won’t stretch the container to match its contents. However, if you have overflow set to one of those, then you won’t need to apply the clearfix class, since overflow set to hidden or auto will clear the floats.
    So, everything should be ok in this case.

    2) The container has a fixed height.
    If that’s the case, you might need to use !important in the rule where the container’s height is defined. However, I’m not completely sure that this will be necessary, since floats inside a fixed height container shouldn’t cause any problems. So, once again, you can get away with it by simply not using the clearfix class at all.

    …And you were right! That solution is based on the min-height fix for IE6, but I’m not good at names, so I didn’t remembered who came up with that! :D

  5. Jeff Starr

    @Ionut, thanks for the followup. Definitely seems like that method could be useful for clearing floats (and fixing min-height!). I haven’t tried it yet, but will certainly give it a try for my next design. Do you have any live examples where this technique is being used?

  6. This is almost exactly what I’ve been doing for the last 2 years. Except I’ve been using: .clearfix {*zoom:1;} and have yet to run into issues with it.

    I don’t like the old method of using height to trigger hasLayout because it’s a valid property and I prefer to use valid properties for valid purposes. The proprietary zoom property is perfect for this: I’d never use it anywhere else, so I’ll never run into any cascading or inheritance issues.

  7. This is definitely the way to go for clearing floats. As someone mentioned above, yes, sometimes I opt for a clearing div, but only in circumstances where you’d need to add more wrapping divs than you would clearing divs. For example:

    [ ] [ ] [ ]
    -- clearing div / --
    [ ] [ ] [ ]

    is easier then

    -- wrapping div --
    [ ] [ ] [ ]
    -- / wrapping div --

    -- wrapping div --
    [ ] [ ] [ ]
    -- / wrapping div --

    But that’s not my main point here. I wanted to say that Dan Cederholm has been spreading a clever alteration to this and that is to call the class name “group” or “container” rather than “clearfix”. I know it kinda feels like an irrelevant wording change, but that’s what semantics basically is. To me, it just FEELS better wrapping stuff in a div called “group”. It feels like you are doing it for organization rather than a “fix”.

  8. As I know, IE6/7 can be targeted by *. So, maybe this method can be written like this :

    .clearfix:after {
           visibility: hidden;
           display: block;
           font-size: 0;
           content: " ";
           clear: both;
           height: 0;
           zoom:1;
    }

    I wonder why you choose such a complex method to target IE6/7.

  9. Jeff Starr

    @Chris: absolutely, avoiding the word “fix” in your code is probably a good thing, but I would rather just use the class (or ID) name of the target element rather than “group.” If you think about it, <div>s generally “group” or “contain” their contents, so applying a selector with either of these names is probably a bit redundant and not necessarily more semantically precise than “clearfix.” I think maybe just simplifying the name to “clear” would be more beneficial maintenance-wise. But either way, whatever works best for the individual designer is the way to go.

    @gaowhen: good idea, but unfortunately IE6/7 doesn’t understand the :after pseudo-element.

  10. sorry I made a mistake. I should use zoom:1 to trigger the haslayout of .clearfix, not the .clearfix:after. So it should be like this:

    .clearfix:after {
           visibility: hidden;
           display: block;
           font-size: 0;
           content: " ";
           clear: both;
           height: 0;
    }
    .clearfix{*zoom:1;}

    How about this one?

  11. Jeff Starr

    @gaowhen: um, I think Patrick already mentioned this a few comments up. But either way, it doesn’t matter because the code is invalid.

    Try again?

  12. In most cases .clearfix { overflow: hidden; zoom: 1; } is all I need. The zoom is moved to a dedicated CSS file for those obsessed with validation.

[ Comments are closed for this post ]