Jens Oliver Meiert

Stop Using the Old “Clearfix”

Post from November 14, 2016 (↻ May 18, 2018), 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.

The clearfix is severely dated, and an extraordinarily 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 extraordinarily 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.

About Me

Jens Oliver Meiert, on September 27, 2019.

I’m Jens Oliver Meiert, and I’m a web developer and author. I love trying things, including in the fields of philosophy, art, and adventure. Here on I share some of my thoughts and experiences.

If you have any suggestions or questions about what I write, leave a comment 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 the, at least some of the most important aspects of such CSS.

Stay up-to-date? That’s easy, 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: May 18, 2018

“Work is love made visible.”