浅谈：我对BFC的理解

什么是BFC？

　　BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

 

BFC的生成（触发）：

　　1.float的值不为none（left或right）；

　　2.overflow的值不为visible；

　　3.display的值为inline-block、table-cell、table-caption；

　　　　（display：table也认为可以生成BFC，这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC。）

　　4.position的值为absolute或fixed；

 

BFC的规则：

　　1.如果给一个元素创建了一个BFC，就相当于创建了一个新的容器，容器内和容器外中的元素不会相互影响。外边的BFC规则，不会对容器里的BFC产生影响，而容器里面的BFC也不会对容器外的BFC产生影响，也就是相互隔绝，互不影响。

　　2.box的布局开始是从包含容器的顶部开始的。

　　3.同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠。

　　4.BFC的区域不会与float box重叠。

　　5.计算BFC的高度时，浮动元素也参与计算。

　　6.每个元素的左外边距与包含块的左边界相接触（从左到右，反之亦然），即使浮动元素也是如此。

　　　　（这说明BFC中的子元素不会超出它的包含块，而position为absolute的元素可以超出它的包含块边界）；

 

BFC的应用：

　　1.防止垂直方向margin重叠。

　　　　正常文档流里的两个box垂直距离会以margin值较大的为准，这里就发生了margin重叠。

　　　　根据第一点规则，只需给其中一个box外套一个div并触发它的BFC即可消除margin重叠。

 

　　2.浮动子元素使其父级高度塌陷，找回高度。

　　　　浮动子元素会使其父级高度塌陷为0，

　　　　根据第五点规则，这时可以触发父级的BFC使其找回高度。

 

　　3.多栏布局（清除浮动）。

　　　　根据第四点规则，BFC的区域不会与浮动元素重叠，以此来消除浮动。

　　　　更可以借此达到多栏布局的效果。

　　　　

　　　　中间box根据确定左右浮动的元素宽度自适应布局。