The New Clearfix Method
Posted on December 6, 2009 in Presentation by Jeff Starr
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 about the original 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-tabledisplay 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:blockto 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.
Translations
- Belorussian translation provided by fatcow
- German translation provided by Alexey Gnatuk
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?
Hi Adub, unless I’m missing something,
clear:both;is useful for clearing adjacent floats, but it is insufficient to actually get container floats to clear floated child elements (such asdivs).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.
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).
@Ryan Williams: yes, the
overflowfix also works great in many scenarios, and is my preferred method as well, but there are situations in which it leads to further design complications. Good examples include missing vertical scrollbars on small windows, problems with borders, padding/margin issues, outline issues, and lots of other subtle nuances. Basically, any properties made possible with some sort of a visible overflow are eliminated once you change it to hidden. This can lead to all sorts of gotchas, especially in complex layouts. Other cases where theoverflowmethod fails is when widths or heights cannot be set explicitly, which in my experience is in a fair number of situations.Here is another situation where overflow fails.
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 ;)
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 aredisplay:inlineby 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");@TeMc: oooh, really like the jQuery approach :)
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.
@Rob Flaherty: good call, I thought about using
height:1%for the new method, but it introduces potential issues with certain layouts in IE. Besides,zoomis invalid only because it is proprietary, and even then it doesn’t matter because they are only applied to the two different versions of IE. If we follow the recommended approach and use conditional comments to include thezoomdeclarations, then all is well and the main stylesheet will still validate.In any case, it is up to you — you will use whichever property you wish for triggering
hasLayoutin IE.zoomis my choice because I find it the least invasive.As for the
overflowmethod, see my previous comment.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.
Thanks for the update. Btw, for IE 7 you can use the selector
*+htmlfor targeting. Makes it a little easier to type.Thanks for the update. I will make all the test later for all my CSS Frameworks.
Do you even need to target the zoom to only ie6/7 ?
I’d just put zoom inside the main declaration.
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.
I use
min-height: 0for IE 7 insteadzoom: 1, andheight: 1%for IE 6This 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%;}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%;}What about this? works in all browsers i believe…
.clearfix { overflow: hidden; }/* ie part */.clearfix { zoom: 1; }@Jaime: mind-boggling, eh? sounds like a lot of work to me..
@Ryan: thanks for the targeting tip! :)
@Vladimir Carrer: cool, thanks for the feedback.
@Paul Irish: hey if it works, it works - validation is merely a tool, right?
@kcmr: I like the idea of using
min-height:0for IE7, but notheight:1%for any browser because, even though it’s valid, it can produce unintended side-effects in certain layouts. Also, applying the clearfix to alldivs may be overkill.@Victor Teixeira: see this comment.
@Jorik: see this comment.
To all: Thank you everyone for the great feedback on this topic. Good to see everyone doing their own thinking instead of just taking my word for it. Cheers! :)
@jeff
True, that is sometimes a big problem..!
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?
Hi Justin, good question - I think the code uses a
.clearfixclass that could be applied to any element in the markup, but you could also apply the fix directly to any existing element according to its class, id, or name. Either method works fine in my experience. Using a.clearfixclass is useful when there are multiple elements that need the fix, but if it’s just a single instance, I would apply the fix directly.Btw, nice to meet you, and thank you for picking up a copy of Digging into WordPress :)
This is a great method that I’ve been using for a while with no problems: http://www.quirksmode.org/css/clearing.html
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.@Pete: yes, we have been over that several times now. See this comment for more information.
@Justin: awesome, great to hear it (on both points)! =)
Jeff I think you should call it “A cleaner clearfix” instead of “The new clearfix” ;) my 2¢
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 ;)
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…
@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.
I alway do like this:
.clearfix {zoom:1;}.clearfix:after {content:""; clear:both; display:block; height:0;}Someone can correct me if I’m wrong, but I think you avoid that because the
zoom:1property doesn’t validate and needs to be fed only to IE on conditional stylesheets.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).My version:
/* Clear Fix */.fix:after {content: '[.]';display: block;height: 0;clear: both;visibility: hidden;}.fix {display: inline-block;}/*\*/.fix {display: block;}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.
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.
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: 1is 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.
Caring if your css validates is old school and pointless.
for me, if
divfloat are inside adiv… if the containerdivhas :overflow : auto;it resolves ALL. On all browsers.
Rod - It adds scrollbars half the time - duh
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 awidth. 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.Nice way of triggering the hasLayout property in IE using the
zoom: 1property. I have to agree that whileheight: 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-radiusortext-shadowfails to validate, so I won’t be too concerned with usingzoom: 1as 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?Hey Teddy, thanks for the great comment. Everything you say makes good sense. As for
overflow:auto, I can’t recommend it for layout elements because of the possibility of unexpected/unwanted scrollbars for overflow content. Blogs especially tend to include lots of long URLs and whatnot, and if not carefully implemented, setting theoverflowtoautocan be problematic (and difficult to detect without constantly visiting old posts and comments, especially when redesigning).I agree with everyone else that
overflow:hiddenworks fine in most situations, but there are plenty of cases where even that is going to cause layout issues. The new design for Perishable Press is an example — I tried usingoverflow:hiddenfor the sidebar and main content area, but kept having difficulties getting other elements to behave properly. That was one of the catalysts for reworking theclearfixclass — I needed to clear floats effectively in all browsers with zero side-effects. My solution has worked well so far..@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: that’s a mouthful! I guess if it works for you, then great, that’s what you should use. Personally, I always look at the work of the person who is recommending a technique before using it myself. Kind of a “show-don’t-tell” sort of thing. Thanks for chiming in! :)
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.
Lol! Relax, Gary - it’s just a silly piece of code. No need to freak out or get upset over anything. Seriously, I appreciate your comment and the time taken to craft such a thoughtful response. Your input is valued and contributes to the conversation. Please don’t feel otherwise.
Gary, clean up your code and grab a tampon!
Hi, This is very nice site & nice articles .
Looks like the conversation overflowed (so to speak) into other venues. Here are a couple of interesting links for more information and discussion on the clearfix method:
Andy Ford explains why he’s saying goodbye to the overflow:hidden hack.
Snook tweets some additional downsides to the
overflow:hiddenhack:http://twitter.com/snookca/status/6532105759Snook tweets that he uses
zoomfor IE:http://twitter.com/snookca/status/6531243562Update: 2010/6/14: links to Snook’s tweets removed.. apparently he deleted those particular tweets (or something else happened).
Update: Here is the first deleted tweet: http://dvlprs.com/snookca/statuses/6532105759 (if it mysteriously disappears, let me know, I have a screenshot this time)
I’ve used overflow:hidden; on the containing element and that usually works out fine.
Hi Sal, that method definitely works in some situations, but there are good reasons why it isn’t a one-size-fit-all solution for clearing floats.
@Gary: Oooh boy. Here’s a chill pill for you :) anyway, yeap I agree that
zoom: 1is 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: autoproperty may give rise to some problems if the content overflows. My bad! I wasn’t thinking straight when I typed that out and I recommendoverflow: hiddeninstead, 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 guessheight: 1%is still the way to go. Have a great week ahead yea!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-tableinstead ofinline-block, which is more common? Greetz, Flo :)Hi Florian, good questions - if you read through the article, you will see that I mention my previous work on the clearfix hack, which implements some new properties and modifies some existing ones. These improvements are now used together with the further changes made in this article, which consist mostly of eliminating IE5 support, simplifying for IE6, and including explicit mention of IE7.
As for why I prefer “
inline-table” instead of “inline-block,” well actually if you look closely you will see that neither of these property values are used in the “new” clearfix class.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.
@Ingo Chao: some good points, especially on the IE7 support — I rescind my previous comment concerning it. For your second point, re-check my work on the original method: the fifth word into the post — and the very first link — credits the original PIE method. Beyond that, I’m going to have to disagree that using valid CSS such as the
:afterpseudo-element to achieve design goals is in any way a “hack.” There are no “rules” as to how valid CSS may be used in web design. And, just becausezoomis proprietary doesn’t qualify it as a hack either. I clearly state in the article that the IE rules should be delivered directly via conditional comments.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: good call - I was just thinking something similar about consolidating the
zoomproperty into the.clearfix:afterselector. Much cleaner, but still best to deliver it via conditional comments I think. Thanks for the comment :)@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.
@Jens: Doh! That’s very true - and a sign that I have spent too much time at the computer today ;)
.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 IE7height:auto !important;will preserve auto height for all browsers, except IE6height: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: 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?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.
Thanks for the tip, Ionut, but I thought it was cute and don’t really have a problem with it ;)
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
overflowandheightrules, 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 tohiddenorautowill 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
!importantin 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
@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?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.
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 wrappingdivs than you would clearingdivs. 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”.
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.
@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
:afterpseudo-element.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?
@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?
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: interesting because most of the time floats also need to be cleared in non-IE browsers, which is something that
zoom:1can’t really do.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.
I thought
zoomwas proprietary exclusive to Microsoft, meaning that it is insufficient to clear floats in anything other than IE. So yes, it does the clearing, but only for IE, correct? To clear floats in all non-IE browsers, additional code is needed (e.g., the:afterrules in the clearfix method. Or maybe I have been slurping too much cough medicine..?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 thezoomfor 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 ;)
@Martin: lol! Okay so now you’re talking about the
overflow:hiddenmethod? What about your “all I need”zoom-only method..? I’m feeling cheated here.In any case, I think we have pretty much hammered the whole
overflow:hiddenthing to death in this comment thread, so no need to waste any more time regurgitating stuff.@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.
whoa! yes, you are correct - I totally did not see that
overflow:hiddenwas included in there. Apologies to Martin - everything makes sense now. You are correct on all points - apparently my cold medicine is a little too strong.Now please kick me in the lower jaw for good measure ;)
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.
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
@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?
Eric, yeah that is a part of the original (old) clearfix article on which this method improves imho.
I don’t use clear fix, learned to avoid that piece
@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!
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:hiddennnI don’t use clear fix too!
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.
Sometimes a lot better to leave as is Tk. Thank you! Great post!
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
This line does NOT work, it triggers a bug in Firefox 3
content: " ";This needs to remain (as in the old version) as content:
".";@JohnONolan: Thanks, but I have not experienced anything weird in Firefox. What seems to be the exact issue?
It’s a complex way to fix float bug. Actually browser will work smoothly when use overflow in simple html or use additional div with clearence in complex html. Becare, the additional Clearfix class will burden the browser, like up two way. So hard to get a perfect way to fix bug when browsers are ugly.
I used
overflow:hidden(andauto) for a couple of projects and had some unpleasant surprises later when the client printed some of their content-heavy pages. If the content div is long and the printed content would go over one page, only the first page of content would be printed and all the remaining pages would be empty. So, back to clearfix.@Jeff Starr - I had exactly the same issue as @johnonolan - the empty
content:" ";rule gave a load of weird layout issues in FF3.6 - adding the period back in fixed it all…@Luc: What was the issue exactly? I would love to check it out, but haven’t been able to recreate any issues in Fx3.6 (or otherwise). Thanks!
@Jeff it basically totally stops the clearfix from working and stuff goes floating all over the place - I’m on Mac FF if that makes any difference (it shouldn’t though)
For a long time searched for something similar. Thanks!
that was very helpful, indeed. thanks a lot!
I tried
overflow:hiddenbut it still screwed up my layout. It’s fine and dandy now :)My question is if this is really a fix (meaning a remedy to the cause of a problem), or rather a fix (meaning work-around to cover up a pile of mess)? :D
Thank you, clearfix solved my problem!
@JohnONolan: Thanks, I’ll run some tests and check it out. In the meantime, I would like to note that I am using this clearfix method here on this site and it works as stated in latest Firefox (currently 3.5.9).
The strength of this method - its simplicity. After all, as they say - all brilliant - just.
Why so difficult? It can be done much easier:
/* new clearfix */.clearfix:after {clear: both;display: block;height: 0;content: "";}*html .clearfix { zoom: 1 } /* IE6 */*+html .clearfix { zoom: 1 } /* IE7 */GreLI, here is some of my reasoning for the additional rules.
fwiw, my advice is to avoid using “clearfix”, because it has the potential to create more issues than it can solve.
http://carsonified.com/blog/design/everything-you-know-about-clearfix-is-wrong/
Thanks Thierry! Looks like some great advice :)
Or you can just use overflow: hidden; on the container as listed in specs (http://www.w3.org/TR/CSS2/visuren.html), and never again use hack to fix issues that do not exist…
The issues definitely exist, unfortunately. As discussed quite thoroughly in this thread, different methods have different shortcomings, but it is nice to have a variety of solutions available for those tricky cases.
@Jeff Starr,
There are several known case when one could or need to use another method of clearing floats, but as I’ve said before - overflow:hidden; fixes most common cases and by specification must be used on containers with floated children.
Have I mentioned that as this is from the box model specs it is supported even by our beloved IE6 (also lesser versions but they do not concern us).
There isn’t need for different methods and their shortcomings :).
two simple ways of clearing floats - clear: both assigned to the element that goes after your floated queue, if the case is special and overflow: hidden; on the container when the case is general.
I’d go with overflow + dimension.
Again, the
overflowmethod definitely works in some situations, but there are good reasons why it isn’t a one-size-fits-all solution for clearing floats. Read through the thread for the full discussion, or check out these links for more information:Andy Ford explains why he’s saying goodbye to the overflow:hidden hack.
Snook tweets
http://twitter.com/snookca/status/6532105759some additional downsides to theoverflow:hiddenhack.Snook tweets that
http://twitter.com/snookca/status/6531243562he useszoomfor IE.Here is another situation where overflow fails.
Yes, the overflow fix also works great in many scenarios, and is my preferred method as well, but there are situations in which it leads to further design complications. Good examples include missing vertical scrollbars on small windows, problems with borders, padding/margin issues, outline issues, and lots of other subtle nuances. Basically, any properties made possible with some sort of a visible overflow are eliminated once you change it to hidden. This can lead to all sorts of gotchas, especially in complex layouts. Other cases where the overflow method fails is when widths or heights cannot be set explicitly, which in my experience is in a fair number of situations.
Update: It looks like Mr. Snook deleted those tweets, but he did say it.
Update: Here is proof: http://dvlprs.com/snookca/statuses/6532105759
Update again: It looks like the missing tweets happened because of a Twitter issue. My apologies to Mr. Snook for implying otherwise.
The best way to use a clearfix can be found at best clearfix ever. It doesn’t use class names to fix the problem but an automatic solution that should be applied to all block level elements except for the p and footer elements.
@Marc
Best clearfix ever? You must not be serious.
Do you understand that your rules will create very different constructs across browsers?
For example, you give a layout to DIVs (
div {zoom:1;}) but these do not create block formatting contexts in modern browsers.Try to nest a bunch of DIVs and apply vertical margins to them, you’ll see that in IE 6 and 7 these margins will *not* collapse.
Check everything you know about clearfix is wrong to understand why your rules will break many layouts.
Are comments working again?
Marc Watts, there is no way that is better. Just looking at it scares the shit out of me.
@Jeff
Regarding Jonathan Snook’s tweet. I believe this is not really related to the issue since “
overflow:hidden” is not a technique, but a trigger.The technique itself has to do with block formatting contexts, so authors can implement the method using other triggers.
In short, it is not clearfix vs.
overflow:hiddenit is clearfix vs. block formatting contextsAlso, if
overflow:hiddenaffects printing then authors can easily reset this styling in their print styles sheet.Lastly,
overflow:hiddendoes not always cut-off content outside the element’s boundaries. It really depends on constructs.Thierry, you say:
Completely agree. I think the best thing to keep in mind is that different layouts require different solutions. There is no need to think in terms of “this vs. that” – it’s simply a matter of understanding the pros and cons of any clearing method and then using the best tool for the job.
@Jeff
I agree, there is nothing authors should disregard. It’s a jungle out there and we need all the tools we can put our hands on.
I use the clearfix method myself, but in very rare occasions.
My addition to this technique is the use of padding declarations (padding-top:1px;padding-bottom:1px;). This is to make sure the vertical margin of the first and last child of the block will not collapse in modern browsers. I added this to the original rule because zoom:1 prevents margin collapsing. That way things look the same in all browsers.
@Thierry Koblentz
Thanks for your reply. I have seen your article on carsonified.
I just briefly checked it out again so correct me if I am wrong but you have 3 div elements with the two sides ones floated and the one in the middle is not floated.
To fix the problem that you have shown, you just need to float the middle div. Unless your using liquid layouts (which I don’t see anyone using anymore), then I see no reason why you wouldn’t float the middle div.
If you do then my technique still works. I suppose this means that I create websites in such a way that it works with my clearfix solution.
@Marc Watts
If I pointed you to the article it was not in relation to a particular layout, but to what this method does to blocks.
You are giving a layout to all these elements:
article, aside, div, form, header, nav, section, and ul
This is what this means for IE 6 and 7:
1. these blocks will contain floats,
2. the border box of these blocks will not overlap floats,
3. the vertical margin of the first and last child of these blocks will not collapse.
In modern browsers, your styling will only trigger #1.
But #2 is the killer here, because - in these blocks - clearing a nested element will clear outside of the block in modern browsers, but not in IE.
For the same reason, the border box of these blocks will be different across browsers.
If your technique works (which I doubt) the way you create web sites, then it may be the best method for you, but it’s certainly not “the best clearfix ever” (as you claim).
@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
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 */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>If you’re having problems with vertical margins then I would recommend using padding instead. It eliminates any collapsing problems.
@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.
Thanks Marc and Thierry(Great).
Thanks to Jeff Starr sharing about new The New Clearfix Method..Fine
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.
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.
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.
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.
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…!?
Hi Jeff,
This is a “newer” clearfix method that takes care of collapsing margins:
.clearfix:before,.clearfix:after {content: ".";display: block;height: 0;visibility: hidden;}.clearfix:after {clear: both;}.clearfix {zoom: 1;} /* IE < 8 */Demo comparing three methods:
http://www.tjkdesign.com/lab/clearfix/new-clearfix.html
Article:
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
@Thierry, why did you drop the ‘font-size:0′ on your ‘improved’ clearfix in #133? When you take it out, you can get a 12px margin at the bottom of the page if you’re using the clearfix on a full-page ‘wrapper’ element. This makes sense as you’re adding a ‘.’ after the wrapper. Put ‘font-size:0′ in and the margin goes away.
@josh, I get the collapsing margins issue with Rofl_Waffler’s method so I think Thierry’s improved solution in #133 (with font-size:0 added) is the soundest approach.
@Darren
If I am not using font-size:0 it is because my solution relies on overflow:hidden, hence there is no need to bother with font-size.
Unfortunately, I see that in the article and demo page I wrote “visibility:hidden” *instead* of “overflow:hidden”. I cannot believe I missed that :-(
I’ll make sure to edit the entry on YUIBlog
Thanks for bringing this up
@Thierry, that makes sense and gets rid of the margin. Thanks!
BTW, I’m using .clearfix {min-height: 0;} in my stylesheet to make it compatible with IE7 so I only need to maintain an IE6-specific stylesheet (inserted with a conditional comment). For me, this strikes the appropriate balance between minimizing hacks/conditional comments and maintaining valid CSS.
@Darren
fwiw, I care more for markup than CSS.
I prefer to see my CSS file fail validation than to include junk markup (CC) in my documents (imho, we should not “cheat” with that layer).
Thanks. The new clearfix method is great. I will use it on my next project. Hate ie 6!
This is a great article Jeff! As much as I have used “overflow hidden” in the past, 50% of the time I end up removing that later during development because of some tool-tip or image “nudged” relatively outside of its limits.
I have also learned to not really care too much about the CSS validating anymore. I try best I can of course, but in the end, why? Is what you have in place is needed to make the site work? Sure, it may matter to almost everyone reading this blog, however, explaining to a client that their CSS file validates to W3C’s regulations is about as useful as a plumber explaining to a housewife who just returned from the beauty parlor how he had to route a certain drain through the floor joists.
Just make it work so they say.
thanks for all your work, it’s an amazing source…keep us the good work
Thanks for the update. Thx Jeff.
Hello,
I am somewhat restarter in webdesign after taking a relatively long break.
Anyways, I just can’t seem to use the clearfix with 960 css framework.
Would you guys look et my simple example and let me know what I am doing wrong?
It looks bad in both osx firefox and safari. When I add a clearing div it look sfine, but I would like to avoid using it.
This is my header
t is a long established fact that a reader will be distracted by the
t is a long established fact that a reader will be distracted by the
t is a long
t is a long
My footer
Very sorry for the wrongly pasted code, now it is the bare minimum here:
I am trzing to use this with clearfix
div id="upper_right" class="grid_6 clearfix"instead of putting extra clearing divs like this one
div class="clear" /divBut it is not working. What is the correct way of doing it?
Thx
Thank for the discussion and the new clearfix. I can sleep now.
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 : http://jsbin.com/osafi3but 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: http://jsbin.com/osafi3/2
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!
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}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:
content:"."Would you have noticed it?
Tiniest update to this…
content: ” “;
can be
content: “”;
doesn’t even need the space.
http://jsfiddle.net/TjW6c/
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.