Latest TweetsOfficial Resources for #Gutenberg Block Editor: digwp.com/2018/12/resources-gu… #WordPress
Perishable Press

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

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.

Jeff Starr
About the Author Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
Archives
[ Comments are closed for this post ]