从margin重叠到BFC的理解

起因：

如图所示：在项目开发过程中，两个相同div之间同时设置外边距margin-top和margin-bottom为20px，我们期望两个div之间有40px的间距，但是出现的效果确是只有20px，不太符合我们的预期结果。

一. 为什么会出现这样的结果呢？
在网上查了下，给出了下面的折叠边距的计算方法：

1. 当两个margin都是正值的时候，取两者的最大值；
2. 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；
3. 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
   但必须注意，所有毗邻的margin要一起参与运算，不能分步进行。

二. 什么是BFC？
BFC：Block Formatting Context，解释为块级格式化上下文
BFC是一个单独，独立的渲染区域.只规定了它的子元素如何布局，与这个区域外部毫不相干。

三. BFC的创建条件：

1. float不为none。（float:left 或float:right等）
2. position值不为static或relative。（position:absolute或position:fixed）
3. display值为inline-block、table-cell、flex、table-caption或inline-flex
4. overflow值不为visible（overflow:hidden、overflow:scroll等）
5. 父元素与正常文件流的子元素（非浮动子元素）自动形成一个BFC

四. BFC的布局规则：

1. BFC区域内部的Box会在垂直方向上一个挨着一个布局。
2. Box在垂直方向上的间距由margin决定。且属于同一个BFC的两个相邻Box的margin会有重叠。
3. BFC的区域不会与float box重叠。
4. BFC区域是一个单独的容器，容器内部的布局样式不会影响到外部的布局样式。
5. 计算BFC的高度时，浮动元素也参与计算。

五：回归margin重叠的问题
通过BFC原理的理解，只要我们让上下两个div不在同一个BFC区域内，就能轻松解决margin重叠的问题了。