Ba la la la ~ 读者朋友，你们好啊，又到了冷锋时间，话不多说，发车！
二、如何产生BFC：
当一个HTML元素满足下面条件的任何一点，都可以产生Block FormattingContext：float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
三、BFC能用来做什么？
a、不和浮动元素重叠
如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏布局就是这么做的。
b、清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了(IE Haslayout)。
根据CSS2.1规范第10.6.3 部分的高度计算规则，在进行普通流中的块级非替换元素的高度计算时，浮动子元素不参与计算。同时CSS2.1规范第10.6.7部分的高度计算规则，在计算生成了
block formatting context的元素的高度时，其浮动子元素应该参与计算。
所以，触发外部容器BFC，高度将重新计算。比如给outer加上属性overflow:hidden触发其BFC。
c、解决上下相邻两个元素重叠
根据CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。也就是于同一个BFC中的两个垂直窗口的margin会重叠。
根据CSS 2.1 8.3.1 Collapsing margins 第三条，生成block formatting context的元素不会和在流中的子元素发生空白边折叠。所以解决这种问题的办法是要为两个容器添加具有BFC的包裹容器。
所以解这个问题的办法就是,把两个容器分别放在两个据有BFC的包裹容器中，IE里就是触发layout的两个包裹容器中！
以上为个人意见，如有雷同，纯属巧合，欢迎大家多提意见！Bey 了 个 Bey ~
网友评论