BFC（块级格式化上下文：block formatting context）

理解

拥有一些特性，可以利用其帮助我们布局

触发条件

• 根元素，即 HTML 元素
• float: left | right
• position: absolute | fixed
• display: inline-block | table-cell | flex | inline-flex
• overflow: hidden | auto | scroll

作用

1.清除元素内部浮动

计算 BFC 的高度时，自然也会检测浮动或者定位的盒子高度。

只要把父元素设为 BFC 就可以清理子元素的浮动了，最常见的用法就是在父元素上设置 overflow: hidden 样式，对于 IE6 加上 zoom:1 就可以了。

2.解决 margin 上下合并 问题

盒子垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠

属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠，那么我们创建不属于同一个 BFC ，就不会发生 margin 重叠了。

<div class="container4 green" style="height: 500px;">
    <!-- 给其中一个div外面包一个div，然后通过触发外面这个div的BFC，就可以阻止这两个div的margin重叠 -->
    <div style="overflow: hidden;">
        <div class="blue w100 h100" style="margin-bottom: 20px;"></div>
    </div>
    <div class="red w200 h200" style="margin-top: 20px;"></div>
</div>

3.解决 margin 内外合并 问题