Reply to “Best Clearfix Ever” post.

I just had to reply to the clearfix post found on Marc Watts website.  I felt that some aspects of his clearfix solution needed to be cleaned up, as well as explaining a bit more about past solutions.

In the past

In the past, we used  

<div class="clearfix"></div>

and added

.clearfix { clear: both; }

to our css.  We would add the clearfix div wherever we found that our containing elements weren’t accepting a height, even if it contained content..  (For more technical nerdery on that, read more on Position Is Everything)

Soon after, we had a new fix, but it didn’t get known around the net as quickly as the div.clearfix did.  The new fix didn’t require extra markup in our css.  It used the css pseudo element.  IE6 and IE7 both don’t understand the :after pseudo element, but zoom: 1; triggers “has-layout” on them.  zoom:1; has the same effect for IE6 and IE7.  This new clearfix can be applied to a classname or applied directly to elements.  I suggest adding the classname to avoid bloating your css.


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

Dont worry that zoom isn’t set specifically for IE, unless you use zoom on your site.  Alas, if you have to, use the star hack.  

.cf { *zoom: 1; }

which will trigger IE6 and IE7.

This seems like a great thing!  Lets attach it to all elements so we never have to worry about it.

Whoa!  Hold on there.

Do we really want set all these css rules to every element in our page and require it to do all that work?  Are we really benefitting that much from it?

I say no.   Use it only when needed..  why add all that extra work to the browser?  Just because it’s good, doesn’t mean to use it everywhere..    that’s like taking a chainsaw to a steak just because you saw how well it cut the wood outside.  Use a chef’s knife, it’s more precise and things wont get messy.

Now I got one more gripe about the code Marc made.  Marc has 8 elements in his css that declare the exact same thing.  A better method is what I call a “selector array”

So instead of:


/* our Global CSS file */
    article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
    aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
    div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
    form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
    header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
    nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
    section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
    ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }

/* our ie CSS file */
    article { zoom:1; }
    aside { zoom:1; }
    div { zoom:1; }
    form { zoom:1; }
    header { zoom:1; }
    nav { zoom:1; }
    section { zoom:1; }
    ul { zoom:1; }

Try “selector arrays”


    article:after,
    aside:after,
    div:after,
    form:after,
    header:after,
    nav:after,
    section:after,
    ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }

    article,
    aside,
    div,
    form,
    header,
    nav,
    section,
    ul { zoom:1; }

So when all is said and done, my suggestion to Marc is to only use the content hack when needed. (you will find that it isn’t needed much), and when you have a similar rules for several selectors.. bunch them up by comma-separated selectors.

1 comment

  • Monex

    - 2 comments………….One of the main methods of creating stable layouts is to ensure that elements that contain floated elements clear these floats..Given an element with an id of wrapper the styles needed to easy clear any contained floats is … wrapper after ..content . ..display block ..height 0 ..clear both ..visibility hidden . . wrapper ..zoom 1 . …The after selector deals with most modern browsers so Firefox Safari Opera the ones listed as Grade A browsers in Yahoo!s chart .

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>