Table of Contents
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>
<div class="demowrap">
<div class="box">
<img class="sammy" src="images/css-no-more-clearfix-flow-root-section-1.png; width="200" height="128"
alt="Sammy!">
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
</div>
</div>
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:
<div class="demowrap">
<div class="box clearfix">
<img class="sammy" src="images/css-no-more-clearfix-flow-root-section-1.png; width="200" height="128"
alt="Sammy!">
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
</div>
</div>
—
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>
<div class="demowrap">
<div class="box box2">
<img class="sammy" src="images/css-no-more-clearfix-flow-root-section-1.png; width="200" height="128"
alt="Sammy!">
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
</div>
</div>
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.
<style>
.demowrap {
margin: 16px;
display: flow-root;
}
.box {
padding: 1rem;
background: rgba(255, 105, 180, 0.1);
border: 3px dashed rgba(255, 105, 180, 0.1);
border-radius: 5px;
}
.sammy {
float: left;
border: none!important;
}
.clearfix {
overflow: auto;
}
.box2 {
display: flow-root;
}
</style>
