January 2017
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.
Next entry: Google Chrome 56 arrives with a warning to non-secure HTTP web pages
Back to January 2017 or the front page.