clearfix 清除浮动

重构clearfix浮动 

构成Block Formatting Context的方法有下面几种： 

float的值不为none。 

overflow的值不为visible。 

display的值为table-cell, table-caption, inline-block中的任何一个。 

position的值不为relative和static。

 

很明显，float和position不合适我们的需求。那只能从overflow或者display中选取一个。 

因为是应用了.clearfix和.menu的菜单极有可能是多级的，所以overflow: hidden或overflow: auto也不满足需求 

（会把下拉的菜单隐藏掉或者出滚动条），那么只能从display下手。 

我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个 

但是display: inline-block会产生多余空白，所以也排除掉。 

剩下的只有table-cell, table-caption，为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context 

因为display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成Block Formatting Context。 

这样我们新的.clearfix就会闭合内部元素的浮动。 

后面又有人对此进行了改良： 

终极版一：

 

.clearfix:after {

    content:"200B";

    display:block;

    height:0;

    clear:both;

}

.clearfix {*zoom:1;}/*IE/7/6*/

 

解释下:content:”200B”;这个参数，Unicode字符里有一个“零宽度空格”，即 U+200B，代替原来的“.”，可以缩减代码量。而且不再使用visibility:hidden。

 

终极版二：

 

.clearfix:before,.clearfix:after{

    content:"";

    display:table;

}

.clearfix:after{clear:both;}

.clearfix{

    *zoom:1;/*IE/7/6*/

}