问题描述：
在子元素里设置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