The New Clearfix Method

Adub – #1

Besides older, non-compliant browsers, whats the point of the first block of css when you can just use clear:both;? I know that Chris Coyier uses clear:both; all of the time and seems to have little problems with it.

So, in short, my question is this: For compliant browsers, why use multiple lines of css when you can theoretically just use 1?

Adub – #3

Ah, okay. It seems that the manner used by Chris is slightly different. He appears to use another child to perform the clearing inside the parent, rather then apply the class to the parent itself. Unless I’m mistaken.

Ryan Williams – #4

Both are valid ways. I tend to lean towards accomplishing the clearing without any extra HTML, therefore I use both the parent and child clearing approaches.

With that said, I’m not fond of verbose methods like Jeff’s and instead prefer to go with the overflow + dimension technique. It’s two lines, and works reliably so long as your CSS is compatible with specifying a width or height on the parent (almost always is in my experience).

TeMc – #6

That’s right Adub.

If you’re willing to add an extra [div] in your code then clear:both (either inline-styling or css-class) is all you will ever need (for ALL browsers).

However, if you rather have a div-container with in it a float-left and float-right and automaticly clear the float after the second div, then you need to “insert” an extra block-element (*:after’s are display:inline by default), that is both invisible, block-level and clearing the float.

Hm… now that I’m thinking.. I never used the word “Insert” in this context before. Makes me think…. jQuery ?

That’d work too !

$ .clear-fix.parent().append("div class clearboth");

Rob Flaherty – #8

Instead of using the invalid zoom:1 for IE7 and IE6, why not use display:inline-block for IE7 and height:1% for IE6? Those both trigger hasLayout while still using valid CSS.

Personally I usually use the overflow method for clearing floats nowadays.

Jaime – #10

I generally use the overflow method since I’m really an advocate of not using unsemantic classes unless completely unavoidable. That said, I do use clearfix sometimes, but I either use it through mixins or I just repeat add the div’s selector to a clearfix code block. It might be a bit more work than just making a clearfix class, but the peace of mind it give me is mind boggling.

Instead of => .clearfix:after {

Id rather do tag.class1:after, tag.class2:after .... {

It keeps the layout in the CSS where it should be.

Ryan – #11

Thanks for the update. Btw, for IE 7 you can use the selector *+html for targeting. Makes it a little easier to type.

Vladimir Carrer – #12

Thanks for the update. I will make all the test later for all my CSS Frameworks.

Paul Irish – #13

Do you even need to target the zoom to only ie6/7 ?
I’d just put zoom inside the main declaration.

Paul Irish – #14

I obviously don’t read before I post.. sorry.

I’d just do a

.clearfix { *zoom: 1 }

But that’s me and my quick unvalidating hacks.

kcmr – #15

I use min-height: 0 for IE 7 instead zoom: 1, and height: 1% for IE 6
This is valid CSS and has no effects for other browsers.

.clearfix{min-height: 0;} /* IE 7 */
* html .clearfix{height: 1%;} /* IE 6 */

I also aply this rules to all divs to avoid use continuosly the clearfix class in the HTML code.

div:after{... }
div{min-height:0;}
* html div{height: 1%;}

Victor Teixeira – #16

hmmm… The clearfix that I use is like this:

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

And the IE6 part:

* html .clearfix {height: 1%;}

Jorik – #17

What about this? works in all browsers i believe…

.clearfix { overflow: hidden; }
/* ie part */
.clearfix { zoom: 1; }

Jorik – #19

@jeff
True, that is sometimes a big problem..!

Justin – #20

Hey Jeff, discovered your blog after picking up your new book with Chris Coyier, great stuff.

Question about the clearfix - it looks like you’re applying it directly to specific elements in your css as opposed to adding the class in the markup. Do you reccommend doing this instead?

Pete – #22

This is a great method that I’ve been using for a while with no problems: http://www.quirksmode.org/css/clearing.html

Justin – #23

Thanks Jeff, i’m just getting into WordPress, and I’ve picked up a lot from the book already, it’s been very helpful!

I’ve been using a blank div with a clear="both" until now, but think I’ll give this a try on my next project.

iPad – #25

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

a guy – #27

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…

iVane Hwang – #29

I alway do like this:

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

Justin – #30

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.

Jeffrey – #31

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).

Nikola – #32

My version:

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

DRoss – #33

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.

Jay – #34

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.

Victor Nogueira – #35

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.

Marco – #36

Caring if your css validates is old school and pointless.

Rod – #37

for me, if div float are inside a div … if the container div has :

overflow : auto;

it resolves ALL. On all browsers.

Marco – #38

Rod - It adds scrollbars half the time - duh

Ryan Williams – #39

Keeping code valid is primarily useful for troubleshooting. It may be a bad habit, but I often forget to include a semi-colon or a closing bracket, or perhaps I’ll accidentally use a colon.

This obviously screws up the site, and so the first step is to check the validity of the CSS. If I have to navigate through CSS that contains many validation issues, it takes me considerably longer to do this.

Obviously using one fix like the clearfix technique isn’t going to be too problematic, but if you have a front-end developer who habitually fills his CSS with ‘harmless’ invalid CSS it soon gets frustrating.

And I stand by the assertion that there’s never a need for invalid CSS. If you want to use ‘zoom’ to throw IE into hasLayout, use one of the other valid properties that does the same thing.

Regarding the clearing method as a whole, like I said earlier on I prefer to use ‘overflow: hidden’ (not ‘auto’) and then give it something to throw IE into hasLayout mode such as a width. This can obviously clash with heights, but if you need to clear a parent then it’s exceedingly unlikely you’ll be using a height anyway. Works for 99% of cases in my experience.

Teddy – #40

Nice way of triggering the hasLayout property in IE using the zoom: 1 property. I have to agree that while height: 1% seems to be a predominant method to trigger hasLayout, it may be problematic under certain specific consequence.

I’m not too concerned about making my stylesheet 100% CSS 2.1 valid since we have moved on to adopting various new properties introduced in CSS3 without making a big mess with browsers that don’t support (they just degrade gracefully, something that I really love). I’m not going to crack my brain just because border-radius or text-shadow fails to validate, so I won’t be too concerned with using zoom: 1 as well.

In the past I was using an empty <div> and making it clear both sides of the float (left and right). Later down the road I focused a little more on proper, valid semantics and so I ditched the empty <div> idea and settled for the handy clearfix method instead.

Sometimes I’ll use the overflow: auto; method but it seems that it only works when you have a predefined width / height for the child elements. When that doesn’t work I’d rollback to clearfix :)

What are your thoughts on overflow: auto;, Jeff?

Gary – #42

@Teddy,
The difference is, border-radius and text-shadow will be W3 Recommendations in the future, while zoom won’t be.

My current preferred method:

/* Float clearing for IE6: */
* html .clearfix
{
      height: 1%;
      overflow: visible;
}
/* Float clearing for IE7: */
*+html .clearfix
{
      min-height: 1%;
}
/* Float clearing for everyone else: */
.clearfix:after
{
      clear: both;
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
}

Gary – #44

I’d disagree that it was a mouthful - minified, it’s only 4 characters more than your suggestion, and mine doesn’t use proprietary styles.

As my CSS validates, then there’s no need to start adding in conditional comments into the HTML to link in ie.css if that’s important to a designer/developer - hence, overall, my solution, on it’s own, is more compact.

I agree that maybe the height: 1% for IE6 would cause issues in some circumstances (none that I’ve come across), but the min-height:1% would struggle to be any more invasive than zoom - you’d need a very edge case.

I’m not sure what the “work of the person” comment was in relation to, and certainly can’t see how it was useful or relevant to the discussion? I’m not a designer, and don’t claim to be. What my sites lack in the visual prettiness mindset that you’re clearly thinking in, I make up with in development aspects in code that you can’t access. Lets stick to discussing the quality of the code - not the quality of the person adding it to the discussion.

Marco – #46

Gary, clean up your code and grab a tampon!

james – #47

Hi, This is very nice site & nice articles .

Sal B – #49

I’ve used overflow:hidden; on the containing element and that usually works out fine.

Teddy – #51

@Gary: Oooh boy. Here’s a chill pill for you :) anyway, yeap I agree that zoom: 1 is a proprietary property meant for IE but what I personally feel is that it doesn’t hurt to include it even if it invalidates your CSS. I used to be a validation OCD back then but now I’ve learned to let things go, teehee.

@Jeff: Oh yea, the overflow: auto property may give rise to some problems if the content overflows. My bad! I wasn’t thinking straight when I typed that out and I recommend overflow: hidden instead, heh. And speaking of layout problems, overflow do give certain layout inconsistencies across some browsers under certain circumstances (I sound very general here because I forgot how to trigger the problems - I swear I found a ton of them when using the overflow property instead of the height fix). I guess height: 1% is still the way to go. Have a great week ahead yea!

Florian Purchess – #52

Hey Jeff, I always use http://www.webtoolkit.info/css-clearfix.html in my projects and it’s basic part of my css-lib. In ref of your title: How much do you consider it as new? Why do you prefer inline-table instead of inline-block, which is more common? Greetz, Flo :)

Ingo Chao – #54

small notes:

- IE7 was already supported. http://ago.tanfa.co.uk/archives/300.html

- Your maintenance work on the old Aslett/PIE hack should at least link to the original method and their authors. /They/ did something “new”.

- “without using hacks” … adding a pseudo-element to a container to let it contain its floats is of course hack. Not to speak from that zoom you are sending to IE.

Jens Grochtdreis – #56

The idea to drop IE5Mac is okay. You could reduce the last two rules to only one rule. The zoom-property is only understood by IE. And a star in front of a property is only read by IE6 and 7. So why not write:

.clearfix { *zoom: 1;}

BTW: it is possible, that IE8 doesn’t understand “zoom”. Given that we could drop the star, too.

Jens Grochtdreis – #58

@Jeff: You cannot consolidate the zoom-property into .clearfix:after, because IE6 (and 7?) won’t see it. ;-)

Of course the best way would be to split the rules into a normal stylesheet and an IE-CSS. But sometimes it is best to keep them together os you can easily teach the rules and transport them to another project.

Ionut Botizan – #60

.clearfix {
          min-height:0;
          height:auto !important;
          height:0;
          }

One definition for both IE6 and IE7, with valid CSS rules and min-height hack:

min-height:0; will trigger hasLayout in IE7

height:auto !important; will preserve auto height for all browsers, except IE6

height:0; will trigger hasLayout in IE6, but won’t affect other browsers, because of the previous rule (which IE6 ignores in this situation)

Ionut Botizan – #62

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.

Ionut Botizan – #64

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

Patrick – #66

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.

Chris Coyier – #67

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”.

gaowhen – #68

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.

gaowhen – #70

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?

Martin – #72

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.

Martin – #74

Of course Jeff, you know it’s know the zoom property which is doing the “clearing”.

I simply prefer this solution to yours because it’s less obtrusive (although the obtrusion is not visible and works just as fine).

It all boils down to the personal preferences and the layout-in-development.

Martin – #76

Uhh, I only hope we understand each other correctly ;)

Back in the days I used to manually insert a clearing span after the floats I wanted to clear, which was my bulletproof and cross-browser implementation of the :after trick.

But lately I am very much into overflow: hidden;, which is much simpler, and allows a container to have as many floats inside it and still not loose its height, meaning that it acts as a float clearer. So all we just add the zoom for the IE.

I am sure you know everything I’m talking about here, but for illustration purposes, here are some live examples I just sketched up: http://martin.saulis.com/test/floats.html

So, I am not arguing the different tricks to achieve a desired result — I am solely expressing my opinion on the advantages of using a simpler approach ;)

Jaime – #78

@Jeff: “In most cases .clearfix { overflow: hidden; zoom: 1; }” I think he made it pretty clear he was talking about using the overflow: hidden method, while using zoom for ie only.

Jaime – #80

Lol no kicking needed I believe. For what it’s worth I rather just add clearing rules to individual selectors via mixins with whatever your preference in css frameworks is. keeps everything 101% semantic and is easier to maintain than using a clearfix class.

Eric Hobart – #81

Can I get some opinions re this clear technique…I’m using it with success:

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

thanks for you input,
Eric

Jens Grochtdreis – #82

@Eric: Please try next time to read the article first and then post a comment. If you had read the article you would have recognized, that you posted a part of the original clearfix-hack which the article discussed top modernise. Reading and thinking doesn’t hurt, you know?

tanya singh – #84

I don’t use clear fix, learned to avoid that piece

Martin – #85

@tanya singh:

I find it hard to believe that, unless you’re not using floats — and they’re the most commonly used layout modifying properties!

paul – #86

hmm, I’m using the clearfix on a continre div ith 4 floated div inside and in IE7 it didnt hae ny effect
I had to use overflow:hiddennn

Know – #87

I don’t use clear fix too!

Monsoon – #88

Thanks a lot for this article, really helped me out today! Tried a couple of other clearfix-solutions, but this was the best one, cheers.

Andiv Sites – #89

Sometimes a lot better to leave as is Tk. Thank you! Great post!

Clares – #90

I was going to mention this line of thinking in the article, but I knew that I would have the chance to do it in the comments