从margin-top失效看BFC

情景

在前端开发过程中，我们通常会遇到这样的问题，我们给一个紧邻父元素的div Box设置一个margin值后，发现该值对内部的div Box没起作用，反而是作用在了父级元素上。
示例代码：

    <div class="outBox">
      <div class="innerBox">
      </div>
    </div>

    .outBox{
      width: 100%;
      height: 100px;
      background: yellowgreen;
      margin-top: 20px;
    }
    .innerBox{
      width: 200px;
      height: 10px;
      margin-top: 40px;
      background: red;
    }

此时对内层div设置的margin-top失效了。原因是margin collapse，即margin折叠，处于相邻的元素在垂直方向的margin出现折叠。我们一般是通过对父元素设置:overflow:hidden, 或者设置padding，或者对子元素设置浮动来解决这个问题。但是为何这样设置就能解决该问题呢？

分析：

BFC的定义与生成条件：

定义：

块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
同时他还具有处于同一个BFC的两个相邻元素的magin会出现重叠的特性。

生成条件：

满足下列CSS声明之一的元素便会生成BFC：
- 根元素或其它包含它的元素
- float的值不为none；
- overflow的值不为visible；
- position的值不为static；
- display的值为inline-block、table-cell、table-caption；
- flex boxes (元素的display: flex或inline-flex)；

margin-top失效原因与解决方案的内涵：

BFC布局规则：

• 内部的元素会在垂直方向一个接一个地排列，可以理解为是BFC中的一个常规流
• 元素垂直方向的距离由margin决定，即属于同一个BFC的两个相邻盒子的margin可能会发生重叠
• 每个元素的左外边距与包含块的左边界相接触(从左往右，否则相反)，即使存在浮动也是如此，这说明BFC中的子元素不会超出它的包含块
• BFC的区域不会与float元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

重叠的计算：

• 当两个margin都是正值的时候，取两者的最大值；
• 当margin都是负值的时候取的是其中绝对值较大的，然后用0减绝对值
• 当有正有负的时候，先取出负值margin中绝对值中最大的，然后用最大正值去减。

BFC导致的问题：

在我们设置margin的时候，可以发现外层div和内层div处于同一个(这里是根元素生成的)一个BFC中，根据重叠原则，内层与外层margin重叠，如上面代码，取其最大的margin值，看起来内存div的margin-top作用在了外层上。

解决方式的内涵

1. 我们给内层元素设置float：
   重点在于在BFC中BFC区域不会与float产生重叠。
2. 给外层设置overflow:hidden:
   重点在于，我们使得外层box生成了一个BFC。

运用：

解决浮动导致的高度塌陷

我们设置一个div内包裹了3张高度不等的图片，未设置浮动时，可以看到容器高度被撑到了最高图片的高度，而当我们为图片设置浮动后，高度就塌陷了。此时我们给外层div设置overflow:hidden属性，触发BFC，可以发现根据BFC规则，float高度计算在内，其高度塌陷便解决了。