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!