ClearFix vs Overflow

Question

Its the standard float issue. You have a bunch of floating elements inside a parent container div. Since the childs are floating, the parent doesnt expand to include all of them.

I know about the clearfix solution as well as setting the overflow property on the parent container div to "auto" or "hidden".http://www.quirksmode.org/css/clearing.html To me setting the overflow method seems much nicer as its just one property. What I want to understand is when does the clearfix approach has advantage over this method cause I see it being used extremely often.

P.S. I am not concerned about IE6.

Answer 1

The only time you should bother using the "clearfix" method that inserts invisible content to clear is if you need an element to be visible when it overflows the element you're applying it to, otherwise triggering hasLayout + overflow is golden.

Note that in IE7 overflow hidden triggers hasLayout. Not sure about IE8.

#wrapper { width:80em; overflow:hidden; }

The method above will work fine in most all cases unless you need say, #header to overflow past #wrapper..

#wrapper { width:80em; position:relative; }
#wrapper:after {  content:"."; clear:both; display:block; height:0; visibility:hidden; }
#header { position:absolute; top:-15px; left:-15px; }