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.