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>

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:

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>

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.