Jens Oliver Meiert

Stop Using the Old “Clearfix”

Post from November 14, 2016 (↻ July 3, 2020), filed under .

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 interesting? Feel free to tweet this, or to invite me for a coffee! Thank you!

About Me

Jens Oliver Meiert, on April 29, 2020.

I’m Jens Oliver Meiert, and I’m a web developer (engineering manager) and author. I love trying things, sometimes including philosophy, art, and adventure. Here on I share some of my views and experiences.

If you have questions or suggestions about what I write, please leave a comment (if available) or a message.

Read More

Have a look at the most popular posts, possibly including:

Cover: CSS Optimization Basics.

Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out some of the most important aspects of such CSS. Available at Amazon, Google Play Books, and Leanpub.

Stay up-to-date? Follow me by feed or on Twitter.

Looking for a way to comment? Comments have been disabled, unfortunately.

Found a mistake? Email me,

You are here: HomeArchive2016 → Stop Using the Old “Clearfix”

Last update: July 3, 2020

“Work is love made visible.”