The Modern Web

Useful technology, techniques and stories from modern web development and design

The end of the clearfix hack. Could it be?

Filed under: CSS, Web Development

A short look at why float clearing mattered in older layouts and how newer display behavior pointed toward simpler layout patterns.

What the clearfix was for

For years, layout was built with floats, and a container holding only floated children collapsed to no height at all. The clearfix was the workaround: a generated pseudo-element that cleared the floats and forced the parent to contain them.

It worked, it was everywhere, and it was in every stylesheet as a utility class that most people copied without reading.

Why it started to disappear

Floats were never a layout system. They were a text-wrapping feature pressed into service because nothing better existed. Once flexbox and grid arrived as real layout tools, the entire class of problem the clearfix solved simply stopped occurring.

There is also a narrower answer for cases that still use floats: a container with a display value that establishes a new block formatting context contains its floated children on its own, without a utility class.

The habit worth keeping

The interesting part is not the specific technique but the pattern. Front-end work accumulates workarounds for constraints that quietly expire, and the workarounds outlive the constraints because they are in a snippet file nobody revisits.

Periodically asking which of your standard utilities are still solving a real problem is a cheap way to keep a codebase honest.

The Modern Web · Copyright 2017 · Published with WordPress · Sitemap