清除浮动之clearfix

案例：

 
 
 
 
 
 
 

 
left
 
right
 
absolute
 
 
 
 

结果并非想象中的那样，box元素高度为0，其高度并没有让其内部元素撑开。

处理方案：

1、最优浮动闭合方案：在浮动元素的父云素上添加class=”clearfix”。
clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
clearfix{*+height:1%;}或者是clearfix{zoom:1;}//IE6&&IE7
简单的说下.clearfix的原理：
(1)、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。
(2)、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。

2、构成Block Formatting Context的元素可以清除内部元素的浮动。那么只要使.clearfix形成Block Formatting Context就好了。构成Block Formatting Context的方法有下面几种：
•float的值不为none。//不适合
•overflow的值不为visible。
•display的值为table-cell, table-caption, inline-block中的任何一个。
•position的值不为relative和static。//不适合

因为是应用了.clearfix和.menu的菜单极有可能是多级的，overflow: hidden或overflow: auto会把下拉的菜单隐藏掉或者出滚动条，所以不适合。
而display: inline-block会产生多余空白，所以也排除掉。
display: table-cell, table-caption，为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context，因为display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成Block Formatting Context
.clearfix {
zoom: 1;
display: table;
}

参考：闲聊CSS之关于clearfix--清除浮动