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 { … Read more
How floats work When floating elements exist on the page, non-floating elements wrap around the floating elements, similar to how text goes around a picture in a newspaper. From a document perspective (the original purpose of HTML), this is how floats work. float vs display:inline Before the invention of display:inline-block, websites use float to set … Read more
You can pretty much use overflow: hidden all the time. But, there are exceptions. Here’s an example of one: Overflowing a container div horizontally but not vertically The question there was: There’s a fixed height on this: http://jsfiddle.net/je8aS/2/ Without the fixed height: http://jsfiddle.net/thirtydot/je8aS/5/ How to clear the floats without using a fixed height? overflow: hidden … Read more
Solution 1: The most reliable and unobtrusive method appears to be this: Demo: http://jsfiddle.net/SO_AMK/wXaEH/ HTML: <div class=”clearfix”> <div style=”float: left;”>Div 1</div> <div style=”float: left;”>Div 2</div> </div> CSS: .clearfix::after { content: ” “; display: block; height: 0; clear: both; } With a little CSS targeting, you don’t even need to add a class to the parent … Read more
Depending upon the design being produced, each of the below clearfix CSS solutions has its own benefits. The clearfix does have useful applications but it has also been used as a hack. Before you use a clearfix perhaps these modern css solutions can be useful: css flexbox css grid Modern Clearfix Solutions Container with overflow: … Read more
If you don’t need to support IE9 or lower, you can use flexbox freely, and don’t need to use floated layouts. It’s worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives. display: inline-block – Better Flexbox – Best (but limited browser … Read more