Stop Using the Old “Clearfix”

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

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.

Toot about this?

About Me

Jens Oliver Meiert, on September 30, 2021.

I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google, 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, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.

If you have a question or suggestion about what I write, please leave a comment (where applicable) or a message.