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. Jeff Starr

    @Nathan Smith: Awesome. 960 is one of the best CSS grids available. It is an honor to be a part of it. Also, setting width (at least I think that’s what you meant) and line-height to zero is a good call — no such thing as too much control when it comes to cross-browser pixel-precision. :)

  2. Ah, right. Yeah, I meant “width” not “height.” :)

  3. Patrik Mayer April 14, 2009 @ 7:39 am

    We’ve used overflow: auto in most cases here. Achives the same as overflow: hidden but without the disadvantages.

    Or did I miss something?

  4. Jeff Starr

    @Patrik Mayer: Both techniques have their pros and cons — which you decide to use really depends on your design goals and particular layout needs. The main catch with overflow:hidden; is just that: any overflow is hidden. When used on wrapping divs or other divs involved with setting the structure of the design, hiding overflow will result in missing scrollbars in certain browsers when the window is resized less than the width of the “fixed” element, most notably so in Firefox. Issues such as this and unintentionally “hiding” content from users are avoided when using the clearfix hack. Again, either is suitable for use depending on your needs, so long as you understand the shortcomings of each.

  5. I don’t think ie6 supports overflow:auto; and will revert to default, which I believe is hidden.

  6. Jeff Starr

    @Joseph: IE6 support for the overflow property is partial at best. Their own documentation on the topic is incomplete, so I can’t elaborate as to which elements are supported and how standards mode versus quirks mode plays into the whole sordid affair.

    Update: Microsoft removed their own reference guide for the overflow property, so the link is replaced to point to the Mozilla Developer Docs.

  7. Russell Heimlich May 1, 2009 @ 10:22 am

    Here is the ultimate guide to clearing a float. Look how easy it is… only two CSS properties on the containing element. No need for any IE6 specific hack or what not. We use this all the time on usnews.com and works great!

    http://www.quirksmode.org/css/clearing.html

    The clearfix method seems a bit cludgy to me.

  8. Website Photo Gallery Software May 1, 2009 @ 3:57 pm

    I have used a variation of that too. So, great article. But I will say, most of the problems in clearing floats is simply because they need a parent container and their container isnt set to float. I dont like setting crazy fixes like overflow:auto or :after psuedo classes as they dont work cross-browser as well as expected, and still may not in the future.

    The best solution is simple. Just place a parent div around your floating content blocks, float it and clear:both it. In most cases you already have a parent div around your floats anyway. The container will hold and stop the floats inside it and allow you to break your next block to a new line without hacks. The clear:both works as it forces everything under it. Simple!

    test1
    test2

    If you dont float the parent, it thinks its not in the same page layout or flow as its floating children, so thats how that works. Once the parent floats, its will hold and contain the children.

    Twitter me if you have comments: http://twitter.com/mitchell_texan

[ Comments are closed for this post ]