Jens Oliver Meiert

Stop Using the Old “Clearfix”

Post from November 14, 2016, reflecting Jens the .

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.

As if popularity ever proved quality.

Figure: On the Internet.

About the Author

Jens Oliver Meiert, photo of July 27, 2015.

Jens Oliver Meiert is a philosopher and developer (Google, W3C, O’Reilly). He experiments with art and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.

There’s more Jens in the archives and at Amazon. If you have any questions or concerns (or recommendations) about what he writes, leave a comment or a message.

Read More

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

Or maybe say hi on Google+, Twitter, or LinkedIn?

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

Happy? Found a mistake? Email me, jens@meiert.com.

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

Last update: November 14, 2016.

“All education shall be free […].”