Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

Clearfix Hack Evolution: From Dumpster Fire to One Line of Code

[ Clearfix Hack Evolution ] Is the clearfix method of clearing floats still useful? It’s been years now and I think the answer is “yes”. For example, I use clearfix to clear floats in the site’s current design. It’s the “cleanest” way to clear floated elements without setting widths, hiding overflow, or floating (nearly) everything. I know what some of you are thinking: “Cleanest..? Clearfix is a hack. A total nightmare event.” Years ago that may have been the case, but not so much anymore..

Contents

Evolution

The clearfix hack exists because browsers need extra help clearing floated elements. Over the years it is has taken many forms. If you search, you will find many variations of the technique. Way back in the day, the original clearfix hack was hideous looking:

/* original clearfix hack */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
.clearfix { display: inline-block; }  /* for IE/Mac */
.clearfix {
	zoom: 1;        /* triggers hasLayout */
	display: block; /* resets display for IE/Win */
	}

I mean look at that. It’s awful. And technically the original clearfix is even more convoluted than shown here because it prescribes conditional comments for all the IE stuff. Notice the browsers that are targeted in the last section: IE for Mac.. which for those who weren’t there is like IE version 5.5 or something crazy. Not even IE 6 bro. Anyway, the point is that the original clearfix hack was needed even back in dinosaur times. But nonetheless clearfix worked, so it became widely used. Soon, developers began to refine and simplify the code, so the clearfix hack began to evolve:

/* effective yet slightly paranoid clearfix hack */
.clearfix:after {
	visibility: hidden;
	font-size: 0.1em;
	display: block;
	line-height: 0;
	height: 0.1px;
    	content: " ";
	clear: both;
	}
* html .clearfix { display: inline-block; }

/* hide from ie mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* end hide from ie mac */

With this slightly improved version of the clearfix hack, we eliminate the need for conditional comments, and also make a few other small improvements. And of course browsers continued to mature in terms of CSS rendering/support, and so accordingly the clearfix continued to evolve:

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

That particular incarnation of the clearfix hack was widely used for years, effectively clearing floats in all targeted browsers. Fortunately web browsers have vastly improved much since those early days, which in turn has enabled us to continue simplifying and improving the clearfix method even further:

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

With this improved version of the clearfix hack, we actually remove all the hack cruft; so at this point in clearfix evolution, it no longer qualifies as a “hack”, as the code technically is entirely valid CSS. Notice the code now applies zoom: 1 to trigger IE’s proprietary hasLayout mechanism, which works just fine to clear the float for IE 6 and 7. So this version of clearfix also was used widely for a number of years as IE dominated the browser space.

From there, browsers have continued to improve, and likewise the clearfix method continues to evolve to this day. If you search for “clearfix” online, you will find many awesome developers and designers sharing their own enhanced or tweaked versions of the clearfix method, each varying in terms of browser support, syntax, and so forth. It’s a perfect example of how an open-source community works together to grow with technology. It is a wonderful thing.

Better Clearfix

So all of that brings us to now. Which clearfix method should I be using? If/when needed, use the following slice of CSS to clear floats in all browsers1:

.clear:before,
.clear:after { content: ''; display: table; }
.clear:after { clear: both; }

Yep, that’s it. Two or three lines of code, depending on how you write it. Simple, effective, and works on all browsers in use today2. And you can rename the .clear class to whatever you want. For my own work, I prefer .box:

.box:before,
.box:after { content: ''; display: table; }
.box:after { clear: both; }

It’s a bit shorter and fits better in my mind with what it actually does: gives you a box that holds other elements. Not a collapsed box that contains a couple of floated elements sticking out and poking other boxes. But an actual box that stacks and clears and does all the things that real boxes do. So that’s the new recommended clearfix method. But we can do even better..

1-Line Clearfix

In the previous “better” clearfix method, what is the CSS code actually doing? Well, it basically creates an invisible box :before and :after the target element. And each of the boxes is displayed as a CSS table. The code then clears the “after” box. Pretty simple. But we can go even further and take it one step better with a single line of code:

.box:before, .box:after { content: ''; display: table; clear: both; }

That’s the ticket right there: the 1-line clearfix. So at this point, the clearfix hack has evolved from virtual dumpster fire to an elegant, effective, single-line solution that uses 100% valid CSS to clear floats in all browsers2.

When to use

So how is the one-line clearfix different than the previous three-line clearfix? Only one real difference: the three-line method clears only the :after pseudo element; whereas the one-line method clears both the :before and :after pseudo elements.

Practically speaking, both 1-line and 3-line versions should provide the exact same results for most layouts. The only exception is when you want the target element (i.e., the element to which clearfix has been applied) to float next to other elements without clearing, which I think is pretty rare scenario in the wild. So in that particular case, the 3-line clearfix is the way to go because it does not clear the :before pseudo-element. In all other cases, the 1-line clearfix is recommended.

As always, please leave any feedback in the comments below or contact me directly, thanks!

Learn More

Some related posts on CSS clearfix:

Footnotes

  • 1 I.e., browsers that people are actually using.
  • 2 Excluding IE 6 and IE 7. Check caniuse.com for details.

About the Author
Jeff Starr = Creative thinker. Passionate about free and open Web.
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
The Tao of WordPress: Master the art of WordPress.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.