关于BFC中的外边距折叠

BFC的外边距折叠（准确来说是垂直外边距折叠）

　　两个相邻的两个盒子（可能是兄弟关系也可能是父子关系）的垂直外边距会合并成一个单独的外边距。（取较大或相同的那个margin值）

触发条件：

　　必须是处于常规文档流的块级盒子，并且处于同一个BFC中。

　　没有将他们分开的东西，如padding、border、clearance。

　　在垂直方向上是相邻的，相邻的情况有以下几种

　　　　1、元素的margin-top与其第一个处于常规文档流中的子元素的margin-top

　　　　2、高度自动的元素的margin-bottom与其最后一个处于常规文档流中子元素的margin-bottom

　　　　3、元素的margin-bottom与其下一个处于常规文档流的兄弟元素的margin-top

　　　　4、元素的margin-top与其margin-bottom，但需满足自身没创建BFC、min-height为0、不包含正常文档流的子元素、高度为0或者auto。

解决方法：

　　 要避免这个问题，可以让触发条件不成立，从而解决问题，所以有以下几种解决方法

　　　1、给父元素加高度或者设置padding值，将他们分开。

　　　2：把父元素变成一个新的BFC。

（创建了BFC的元素不会和它的子元素发生外边距叠加，但是同一个BFC下的垂直相邻子元素下外边距会发生折叠。）

总结BFC的作用：

1：给父级元素清除浮动，避免高度塌陷；

2：垂直margin合并。

3：在两栏布局中，可以用BFC避免浮动兄弟元素的遮盖。