Grow your CSS skills. Land your dream job.

Why do we include html[xmlns] in Clearfix?

  • # March 5, 2013 at 3:40 pm

    (http://www.webtoolkit.info/css-clearfix.html “http://www.webtoolkit.info/css-clearfix.html”)


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

    .clearfix {
    display: inline-block;
    }

    html[xmlns] .clearfix {
    display: block;
    }

    * html .clearfix {
    height: 1%;
    }

    Whenever I get in Trouble with some css issue , usually refer to CSS-TRICKS, could not find it here, thought lets ask in forum,

    Thanks!
    Vipul

    # March 5, 2013 at 5:08 pm

    @vipul_anand,

    Dont quote me but i believe that hack targets certain browser, Safari to be exact.

    Check out Paul Irish’s CSS Hacks and another post by Solidstategroup.

    # March 5, 2013 at 6:18 pm

    This is another great site to look at for browser hacks. http://browserhacks.com

    # March 5, 2013 at 10:44 pm

    @JohnMotylJr, @rosspenman Thanks for the links, sea of information there :)

    # March 6, 2013 at 11:19 am

    This clearfix method is pretty old. The latest is:

    .cf:before,
    .cf:after {
    content: ” “;
    display: table;
    }

    .cf:after {
    clear: both;
    }

    If you don’t care about collapsing margin, you can remove the :before stuff. And if you care about IE 6/7, add this:

    .cf {
    *zoom: 1;
    }

    PS: pretty glad to see the first link to http://browserhacks.com on this forum. Thanks @rosspenman. :)

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".