Stop Using the Old “Clearfix”

Published on November 14, 2016 (↻ July 1, 2023), filed under (RSS feed for all categories).

I had thought the old method of clearing through .clearfix:after { clear: both; content: ''; } (alphabetically sorted, of course) long dead, but playing with Enki, which I enjoy a lot, I spotted it quite alive and even being taught to developers.

This clearfix is severely dated, and poor practice.

To clear such floats, simply use an overflow: Anne advised just using overflow: auto on the parent container more than a decade ago. Typically, this requires no markup changes, something that’s always to be preferred.

Having a superior alternative like overflow for that many years is why the clearfix is horribly dated; why it’s bad practice is because of its tax on the HTML, including the ill naming: Maintenance benefits immensely from avoiding class names that are tied to code specifics (just as it does from staying away from presentational and behavioral names), so much that there’s no excuse not to, as always, use no, functional, or generic ID and class names. “.clearfix” is a name that shall ever only be used by beginners, a mistake to be made once until a more experienced developer flags it in a code review, or we inform about the issue in our writings.

If for whatever reason, using overflow does not work, we should use the existing markup structure (that is, no extra code) to clear using modifications maybe borrowing from, but not copying, other clearfixes. From my experience, overflow does it pretty much all of the time, and so far, any alternative at least got the HTML wrong.

Just don’t use the old clearfix.

Was this useful or interesting? Share (toot) this post, or support my work by buying one of my books (they’re affordable, and many receive updates). Thanks!

About Me

Jens Oliver Meiert, on September 30, 2021.

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on I share some of my views and experiences.

If you want to do me a favor, interpret charitably (I speak three languages, and they can collide), yet be critical and give feedback for me to learn and improve. Thank you!