Say Goodbye to the Clearfix Hack With display: flow-root

The clearfix hack has been around for a long time now, and patches a problem that can happen with floating elements that are larger than their container.

Here’s an example of the problem:

.box {   padding: 1rem;   background: rgba(255, 105, 180, 0.1);   border: 3px dashed rgba(255, 105, 180, 0.1);   border-radius: 5px; } .box img {   float: left; } 
<div class="box">   <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!">   Lorem ipsum dolor sit amet, consectetur adipiscing elit... </div> 

Sammy! Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Old clearfix hacks

The old fix was to set overflow: auto on the container, so a class like this is often created and used on elements that contain floated elements:

.clearfix {   overflow: auto; } 
<div class="box clearfix">   <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!">   Lorem ipsum dolor sit amet, consectetur adipiscing elit... </div> 

And now everything works as expected:

Sammy! Lorem ipsum dolor sit amet, consectetur adipiscing elit…

display: flow-root Improvements

With display: flow-root on the container element, a new block formatting context is established for the element with flow layout formatting, and this fixes our overflowing issues much more elegantly.

.box {   display: flow-root;   padding: 1rem;   background: rgba(255, 213, 70, 0.1);   border-bottom: 2px solid rgba(236, 198, 48, 0.2); } 
<div class="box">   <img class="sammy" src="Sammy_punk.svg" width="200" height="128" alt="Sammy!">   Lorem ipsum dolor sit amet, consectetur adipiscing elit... </div> 

Sammy! Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Browser Compatibility

As of 2020, 87% of browsers worldwide will properly handle flow-root, based on Can I Use data. Opera Mini and Internet Explorer 11 cannot handle display: flow-root;, but in 2020 it makes up less than 1.5% of worldwide usage.