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

Lessons Learned Concerning the Clearfix CSS Hack

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 criticism1 concerning the ideas presented herein. — Fire away, all you crazy CSS heads! ;)

Footnotes

Jeff Starr
About the Author Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
Archives
20 responses
  1. David Tapper March 4, 2008 @ 4:31 pm

    What is your opinion on using overflow:hidden? This seems to achieve the same effect and is a bit simpler.

    .clearfix {
    overflow: hidden;
    }

    * html .clearfix {
    height: 1px;
    overflow: visible;
    }

    It requires the holly hack to work in IE, but otherwise seems to work perfectly.

    Also, what do you mean display:inline is deprecated? First I’ve heard of this! Is this some CSS3 thing?

  2. Jeff Starr

    Of course, in general there is nothing wrong with using the overflow method, the float everything method, or any other method with which you feel comfortable. For me, it all depends on the compositional requirements of the layout in question. Hiding overflow has its disadvantages, just like any other method (including this one).

    As for my misleading use of the term “deprecated,” you can relax — I meant it in a strictly general sense, as if to say that the use of inline has long-since been replaced with inline-block for the purposes of this hack. Rest assured, the inline property value isn’t going anywhere anytime soon ;)

  3. David Tapper March 4, 2008 @ 5:21 pm

    Thanks, you had me worried for a moment :P

  4. Another issue with the line:

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

    is that I’ve found that grouping IE6 * html hacks renders them useless. You need to keep them separate.

  5. Jeff Starr

    Excellent information, Andy — thank you for sharing it with us! :)

  6. Kate Stringer May 1, 2008 @ 8:51 am

    Is there a reason to use height:1% vs height:1px? We have the following on our site which is working for the most part:

    /* Clear Fix */

    .cf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
    .cf { display: inline-table; }
    .cf { display: inline-block; }

    /* Hides from IE-mac \*/

    * html .cf { height: 1%; }
    .cf { display: block; }

    But we now have a very long page and in IE all the divs with the clear fix class are getting blown out. I’m wondering if this is because the 1% height relative to the height of the page is much larger on this long page? Is there any problem in using height:1px instead?

  7. Jeff Starr

    Hi Kate, I have used both versions (1px and 1%) on many occasions and have not experienced any significant issues with either. One minor issue that I did encounter while using height:1px; involved the nested div not centering correctly in the parent div. This issue occurred in IE6 only, and was resolved by adding a position:relative; declaration along with the height:1px;. Beyond that, your reasoning is correct concerning the use of height:1%;. You should be fine using height:1px; as an alternative, however I do recommend proper testing as well. ;)

  8. @David Tapper
    I’ve relied on overflow:hidden in many situations, but it can come back to bite you in some cases.

    In particular, if you have say a decorative transparent PNG that you’ve absolutely positioned partially in and partially out of the parent container with the overflow:hidden property set, then the PNG will be cropped at the boundary of the parent container.

    This would apply to any element that is for whatever reason absolutely or relatively positioned partially or entirely out of the parent container.

    On a separate note, I hate adding the clearfix class to the markup, so I’ve taken to just adding additional selectors in the css. Like so:

    .clearfix:after,
    .sidebar:after,
    #footer:after {...}

    adds a little cruft to the css, but keeps the html a little more pure.

  9. M.Majorkarthik January 8, 2009 @ 10:24 pm

    Excellent information about clearfix . Keep up the good work

  10. Jeff,

    You’re the man. I’d been battling this and remembered you writing something about this. Problem solved. Thanks!

  11. Jeff Starr

    @Stephen: My pleasure! Great to see you again — I bet you are as busy as I am these days :) I hope things are going well for you. Cheers!

  12. Thanks for the tip. Someone let me know about this fix, so I’ve included it in the latest version of the 960 Grid System. Only change I made was not to bother filtering for IE5 on Mac (does anyone actually use that browser anymore).

    http://960.gs/css/uncompressed/960.css

    (At the end of the file)

    I also added — height: 0; line-height: 0; awhile back, just to make sure it’s as hidden as can be. Like you, I’m a bit paranoid with my CSS, and always want to make sure things are as pixel-precise as possible. :)

[ Comments are closed for this post ]