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.

1
.containingElement {
2
  overflow: hidden;
3
}

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

1
* html #container {
2
  height: 1%;
3
}

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!