Lessons Learned Concerning the Clearfix CSS Hack

Published Tuesday, February 5, 2008 @ 10:08 am • 13 Responses

I use the CSS clearfix hack on nearly all of my sites. The clearfix hack — also known as the “Easy Clearing Hack” — is used to clear floated divisions (divs) without using structural markup. It is very effective in resolving layout issues and browser inconsistencies without the need to mix structure with presentation. Over the course of the past few years, I have taken note of several useful bits of information regarding the Easy Clear Method. In this article, I summarize these lessons learned and present a (slightly) enhanced version of the clearfix hack..

Use a space instead of a dot to prevent breaking layouts

Here is the defacto implementation of the clearfix hack, as presented in one of the original articles covering the method:

.clearfix:after {
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Notice the line containing the content: "."; property. I have found that the period (or dot) specified in quotes has a nasty tendency to break certain layouts. By adding a literal dot after the .clearfix division (i.e., via the .clearfix:after selector), the clearfix hack creates a stumbling block for certain browsers. And not just for Internet Explorer — depending on the layout, even Firefox will choke a layout upon tripping on an :after-based pseudo-dot. The solution to this subtle design chaos? Replace the literal dot with a single blank space: "content: " "; — this trick has proven successful so consistently that I now use it as the default property in every clearfix hack that I use.

/* drop the dot, replace with space */
.clearfix:after {
     content: " "; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
     }
     .
     .
     .

Add a zero font-size property to make it all smooth

Another bizarre inconsistency involved with clearfixed (probably not a real verb) layouts seems to disappear when the font-size property is included in the hack and subsequently set to zero:

/* zero font-size added to prevent potential layout issues */
.clearfix:after {
     content: " "; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
     font-size: 0;
     }
     .
     .
     .

This may be overkill when using a blank space instead of an actual dot (as described above), but I honestly don’t care. I’m like some sort of CSS animal — using every available weapon to fight hellish layout battles. Looking back, I think I may have implemented this solution before discovering the empty-space fix. Yet some browsers may process white space as text, so it may prove beneficial nonetheless. Maybe, maybe not — I’m going to throw it out there for all of you CSS gurus to trip on.

Beware of misinformation regarding this method

No, I am not trying to warn you against the tips offered in this article — you will find they are quite harmless. Instead, I am referring to erroneous information found elsewhere on the Internet and even in printed form. Here is a presentation of the clearfix hack as presented in Joseph W. Lowery’s otherwise excellent book, CSS Hack & Filters:

.clearItem:after {
     content: ".";
     clear: both;
     height: 0;
     visibility: hidden;
     display: block;
}

.clearItem { display: inline; }

/* Start Commented Backslash Hack \*/
* html .clearItem, * html .clearItem * {height: 1%;}
.clearItem { display: block; }
/* Close Commented Backslash Hack */

Yikes! Do you see the problem? Actually, there are two potential issues in Mr. Lowery’s “.clearItem” hack. The first one is the deprecated use of the inline value for the display property in the middle .clearItem declaration:

.clearItem { display: inline; }

..as discussed in the original article, the property value here should be inline-block to fix floats on IE/Mac:

.clearItem { display: inline-block; }

The second flaw in Mr. Lowery’s “.clearItem” hack involves the * html .clearItem * selector in the following line:

* html .clearItem, * html .clearItem * {height: 1%;}

The first selector in this line is all that is required to achieve a successful hack. The second selector, however, effectively sets the height to 1% for all Internet Explorer browsers. This sucks, and I found out the hard way: after a month or so of using this version of the hack, I discovered that around half of my visitors (i.e., those using IE) were unable to leave comments because all of the form fields were only 1 pixel tall! Fortunately, it did not take too long to hammer down the culprit: the nefarious CSS wildcard selector ( * ) as seen in the erroneous code above. After deleting that second selector, everything clicked.

So what’s the moral of the story here? Simple. Always double-check your code and think critically before blindly copying & pasting your way to victory. Even professional writers and programmers make mistakes, so be sure to pay attention and make no assumptions.

All together now..

Putting everything together and combining these lessons learned with the original (correct) version of the Easy Clear Method, we fashion the following, fully functional, flaw-fixing clearfix formula:

/* 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 */

..and that’s a wrap! I sure hope you had as much fun as I did while writing this article.. if not, hopefully this round of “lessons learned” presented you with some useful information regarding the omnipresent, ever-useful clearfix hack. And finally, as this post focuses on CSS, I expect nothing less than the severest of criticism ¹ concerning the ideas presented herein. — Fire away, all you crazy CSS heads! ;)

Note

• ¹ A bit of sarcasm for you ;)

← Previous post • Next post →

« Optimizing Google Analytics Performance • Permalink Evolution: Customize and Optimize Your Dated WordPress Permalinks »