// Tutorial //

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

Published on September 2, 2020
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
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.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Default avatar
Community Builder

Then: Learned to build the internet on DigitalOcean Community. Now: Building DigitalOcean Community on the internet.


Still looking for an answer?

Was this helpful?
Leave a comment