ClearFix vs Overflow [duplicate]

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.

Teevens

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; }

Uhland

IE8 doesn't have hasLayout anymore. – Warty

Right, but overall it really does since it supports the older modes instead of IE8 standard mode. – Uhland

I should also add that applying a float to the parent element has the same effect as overflow:hidden. So if you need the elements to overflow (like a drop shadow for example), and you can apply a float to the parent, that's often better than clearfix. – Dibranchiate

It's not recommended to float the parent if the element is horizontally centered, aka the #wrapper 90% of the time, as in this case. – Uhland