Forums

vipul_anand

I came across this code while searching for different Clearfix methods


    .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

JohnMotylJr

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

rosspenman

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

vipul_anand

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

HugoGiraudel

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. :)

treehouse : what would you like to learn today?

Forums

Why do we include html[xmlns] in Clearfix?