// 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

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


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?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment
Leave a comment...

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click here to Sign up and get $200 of credit to try our products over 60 days!