While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
You can help us out by using 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="https://www.digitalocean.com/community/tutorials/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="https://www.digitalocean.com/community/tutorials/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="https://www.digitalocean.com/community/tutorials/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.