Is clearfix deprecated?

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

What methods of ‘clearfix’ can I use?

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

How do you keep parents of floated elements from collapsing? [duplicate]

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

What is a clearfix?

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