BFC的外边距折叠

 问题描述：

　　在子元素里设置margin-bottom，该margin-bottom的值没有作用于子元素，而会”转移”给外层div，如下所示。

        <div style="background:red;">
            父元素的内容占据
            <div style="margin-bottom:20px;background:blue;">
             子元素的内容占据占据   
            </div>
        </div>
        <div style="background:yellow">
            这是下一行的内容
        </div>

　　效果如图：

　　为什么会产生这种现象呢，究其根本乃是因为BFC的外边距折叠，什么是外边距折叠呢。

 

BFC的外边距折叠

　　两个相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以合并成一个单独的外边距。这种合并外边距的方式被称为折叠。

什么情况下会引起外边距折叠。

触发条件：

　　必须是处于常规文档流的块级盒子，并且处于同一个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：把父元素变成一个 block formating context ，也就是新建一个BFC，根据BFC的定义，下面是可选的方法

　　　　a、float: left/right

　　　　b、position: absolute

　　　　c、display: inline-block/table-cell

　　　　d、overflow: hidden/auto