Menu
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.
484
The clearfix property is generally used in float layouts where elements are floated to be stacked horizontally. The CSS float property states how an element should float; i.e., it specifies the position where an element should be placed. The clearfix property allows a container to wrap its floated children.
The clearfix, for those unaware, is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreak havoc on a layout.
A clearfix is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup. It is generally used in float layouts where elements are floated to be stacked horizontally.
Clearfix property clear all the floated content of the element that it is applied to. It is also used to clear floated content within a container. Example 2: With clearfix property. Without using the clearfix class, the parent div may not wrap around the children button elements properly and can cause a broken layout.
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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
