Clear Your Floats Even Easier

Clear Your Floats Even Easier

One of the more popular posts on this site is my explanation of the easyclear method of clearing floats. I had been using it for a while when I wrote the post, and it's a great solution. However, Dave Woods commented on that post with a new method: setting overflow:auto on the containing element actually has the same effect as the clearfix, without all the extra stuff.

I thought, "that can't be right...can it?" Turns out Dave was right. After looking into it some more, it turns out that overflow:auto and overflow:hidden both work the same way, and that's it.

.containingElement {
  overflow: hidden;
}

Of course, IE6 doesn't play along with the rest, so as always, here's the hack:

* html #container {
  height: 1%;
}

Use this hack (or one without the * html inside an ie6-only stylesheet) to make ie6 behave correctly.

That's all there is to it.

I have since began using it everywhere, and it works flawlessly. The only time it doesn't work correctly is when you actually need elements to overflow the box (a drop-down menu for example, or any absolutely positioned elements outside of the box). In these cases, I fall back on the trusty clearfix. But for all others, overflow:hidden to the rescue!

Comments (archived for posterity)

  • Kevin Mario commented

    AWESOMENESS =D

    What a way to start 2009 =) thanks mate !

  • Jennifer commented

    For overflow: auto, I wouldn’t say “flawlessly”. If you have a div of a set height, with complex positioning of elements inside, you could also exceed the set height and generate scroll bars. I did this with a header section containing many floated elements - if the items were not precisely in their spots, now I don’t remember the details, but they would exceed the defined height of the container and we’d get nasty scroll bars for the just the header.

    Now, this overflow: hidden working the same way is fascinating. That would have eliminated that problem. I’ll have to run a test case and implement that.

    Dan Cederholm discussed this very method when going over the E section (“Easy-clearing floats”) of his talk at this year’s An Event Apart. I didn’t document it in my notes but I recall it in his slides.

    He also remarked about using the class name “blockgroup” rather than clearfix - less scary hehe.

  • Dan commented

    @Kevin - No problem(:

    @Jen - Yeah, I’ve been using hidden for everything because if something borks up, it just gets cropped instead of having scrollbar madness. But, I would say that a container with a fixed height is probably going to be better served with the easyclear, just because of the propensity for things overflowing the box. I remember Cederholm talking about that. The different classname was a good idea.

  • Dave Woods commented

    If you don’t like using the hack for IE6 then you a width will also have the same effect so in most cases you can get away with just adding width: 100%; to the container which will have the same effect in all browser.

    Essentially the problem IE has is setting haslayout so as long as you satisfy this problem with one of these methods (Haslayout solutions), then you shouldn’t have any problems or need to use the IE hack (although some cases may require it depending on how you’re dealing with the box model).

    Hope that helps :)

  • Dan commented

    @Dave - good call. I should have clarified that you can use whatever hasLayout hack you’d like. That’s just the one I’ve used the most in the past (although I’m starting to warm up to zoom:1 a little more

  • Jennifer commented

    I love zoom:1 as well to trigger hasLayout… if you use an IE6 conditionally commented out stylesheet, since it’s not valid CSS.

    My bilk with IE6 is that if it refuses to follow the rules in rendering, then I don’t have to follow the rules to make it behave (if I have to make it behave, mind you). So hide it in a conditional comment so that none of my happily rendering browsers have to be sad while parsing through my CSS.

  • Kamal commented

    THANKS! This was exactly what I needed.

  • Dan commented

    Hey all,

    I like everyone found this technique really useful, however I’ve come across a problem, that I’m interested to see if people have the solution to. I have a navigation bar made up of floated left list elements, this list is within a container div, i used the overflow hidden technique to clear the float, works like a charm. Here’s the problem on rollover my nav has a suckerfish type subnav. Because of the overflow:hidden the subnav no longer displays, as the container div appears to hide the subnav when it becomes a visible DOM element. Any ideas?

    Dan

  • Dan commented

    @Dan,

    In that sort of situation, using overflow:hidden or overflow:auto just won’t work. I’ve run into a few of those situations. Basically any time you’re going to have overflow (on purpose), it’s not going to work. In these situations, I use the easyclear method for those specific elements. That works like a charm, and there’s a limited amount of elements that require it (i.e. elements that have overflow).

  • Spencer commented

    Just tried it and I know it works. But I wanted to see what would happen if I put an absolutely positioned item in the containing element, and sure enough, some problems occurred. It doesn’t matter if you use overflow:auto; or overflow:hidden; on the containing element. If you have an absolutely positioned item within that containing element, and the absolutely positioned item that goes outside of that containing element, then it cuts it off. So, the fix works, but will cause problems for absolutely positioned elements within it that overlap the containing element height and width.

  • Dan commented

    Hey @Spencer, thanks for stopping by. I addressed that above; in those situations I use easyclear. And while those situations obviously exist, I’d say they’re much less common than a normal container that doesn’t have any overflow, but has some floats. Both are good tools to keep in your stylesheets.

  • Fred commented

    Thank God for you my man.

    I’ve been breaking my head over this for the past couple of hours!!!

  • ashish commented

    Overflow hidden has one problem. If we have popup in that div and some of that part is coming outside the range of overflow hidden div those part of popup will not show.

  • Den commented

    Thanks this work for me