【CSS】块格式化上下文（BFC）：解决margin坍塌、高度塌陷、自适应布局等问题

1、css 定位机制：

css 中的定位机制可分为三种：
1. 普通的文档流：block 块级元素单独一行 (span)，inline内联元素排成一排（div）。
2. 定位流：position 相当于新开一个层级。
absolute：绝对定位。从文档流中脱出，相对于其最接近的一个最有定位设置的父对象进行绝对定位。
relative：相对定位。相对于正常文档流中的位置偏移。
fixed：固定定位。滚动滚动条时，元素一直位于固定的位置。
static：保持正常的文档流。
3. 浮动流：float 。

2、 BFC解决什么问题：

三种布局方式有可能会相互影响，例如：margin的相互重叠影响外部元素；父元素高度坍塌等问题。
这时候可以用统一的方式解决问题：创建BFC（Block Formatting Context），即被隔离的独立区间。

BFC 表现原则：如果一个元素具有BFC，内部子元素怎么操作都不会影响外部的元素。

3、 怎么触发BFC：

1. body:
2. float : left | right （非 none）
3. position : absolute | fixed (非 relative)
4. display : inline-block | table-cell | table-caption | flex | grid
   (非 none | inline | block)
5. overflow : auto | hidden | scroll (非visible)

4、 BFC - margin重合：

  <div class="box">
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>

.box {
   
   
  width: 300px;
  height: 300px;
}
.box1 {
   
   
  margin-bottom: