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 {2overflow: hidden;3}
Of course, IE6 doesn't play along with the rest, so as always, here's the hack:
1* html #container {2height: 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!