Grow your CSS skills. Land your dream job.

Clearfix to much??

  • # February 11, 2013 at 4:24 pm

    Hello,
    I am working on a older site that should really be rebuilt but there is not enough time. I feel that i am using the class ** Clearfix** to much in the layout.

    My questions is
    Is there any cases that the use of the class **clearfix** is to much?

    # February 11, 2013 at 4:31 pm

    What do you mean by too much? It’s a pretty small bit of code.

    # February 11, 2013 at 5:31 pm

    Personally I see it coming down to how well formed your markup is and how semantic your CSS is, if your using a lot of floats for elements that don’t need them that would be cause to re-think your approach and try to optimize it without using `clearfix`.

    # February 11, 2013 at 5:44 pm

    I think really it depends which version you mean. I would say that the one with support for old versions of IE is a little overkill but that rather gets into the debate of supporting IE in general. The most progressive method simply consists of:

    .element-with-floated-objects:after {
    content: “”;
    display: block;
    clear: both;
    }

    As this uses a pseudo class selector, some more weird stuff is needed for IE7 and down:

    * html .clearfix { height: 1%; }
    .element-with-floated-objects { display: block; }

    In my opinion, this is fine – especially the more modern one – as other methods (like setting `overflow:hidden ` on the container) can have annoying knock-on effects.

    # February 13, 2013 at 10:22 am

    **Thanks** for all comments.
    I agree with @notfilc it is a small bit of code, after rethinking my code (thanks @SgtLegend) i was able to remove the **clearfix** from the section that was in question.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".