BFC----Clearfix

BFC----Block Formatting Context

1. .clearfix { 
2.   *zoom: 1; 
3. } 
4.  
5. .clearfix:before, 
6. .clearfix:after { 
7.   display: table; 
8.   line-height: 0; 
9.   content: ""; 
10. } 
11.  
12. .clearfix:after { 
13.   clear: both; 
14. } 

在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹，可以保证外部div的height，即清除"浮动元素脱离了文档流，包围图片和文本的 div 不占据空间"的问题。

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

1.     float的值不为none。 
2.     overflow的值不为visible。 
3.     display的值为table-cell, table-caption, inline-block中的任何一个。 
4.     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就会闭合内部元素的浮动。