The Clearfix

layout hacks 2004 still works

An empty generated period, hidden, purely to make a container wrap its floats.

In 2026: Still works and still gets used, though display: flow-root now does the same thing honestly. The visibility: hidden period was there because a truly empty string did not generate a box in some browsers.

Where it came from: Tony Aslett, csscreator.com, 2004. Refined many times after. MDN ↗

<style>
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html .clearfix { height: 1%; }   /* and hasLayout for IE6 */
</style>

<div class="clearfix" style="border:2px solid #333">
  <div style="float:left; width:80px; height:60px; background:#8cf">float</div>
  <div style="float:left; width:80px; height:60px; background:#fc8">float</div>
</div>

<!-- The 2026 version -->
<style>.modern { display: flow-root }</style>

sandboxed demo · breaks nothing but itselfrestart

More in layout hacks