概念

BFC(Block formatting context)块级格式化上下文，它是一个独立的渲染区域。BFC是Web页面的可视化CSS渲染的一部分，是块盒子布局发生的区域，也是浮动元素与其他元素交互的区域。

触发BFC的条件

1. 根元素或者包含根元素的元素
2. float不为none的浮动元素
3. position为absolute或fixed的绝对定位元素
4. overflow不为visible的块元素
5. 行内块元素 display: inline-block;
6. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
7. 网格元素（display为 grid 或 inline-grid 元素的直接子元素）

BFC的表现形式和对应的解决方案

1. 属于同一个BFC的相邻box的margin会在垂直方向发生重叠。

<div class="div1"></div>
<div class="div2"></div>

.div1,.div2 {
    width: 150px;
    height: 150px;
    border: solid 1px red;
    margin-bottom: 20px;
}
.div1 {
    margin-bottom: 20px;
}
.div2 {
    margin-top: 10px;
}

上下margin会重叠，表现为上下间距20px，解决方案：

dom更改为
<div class="div1"></div>
<div class="outer">
  <div class="div2"></div>
</div>

样式新增
.outer {
    overflow: hidden;
}

表现为上下间距20+10=30px

设置BFC的前后对比图：

2. 子元素设置浮动，父元素不能撑起来

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

.parent {
    border: solid 1px blue;
}
.child {
    width: 150px;
    height: 150px;
    border: solid 1px red;
    float: left;
    margin-left: 10px;
}

解决方案：将父节点设置为BFC，增加overflow: hidden

.parent {
    overflow: hidden;
}

设置BFC的前后对比图：

3. 如果一个浮动元素后面跟着一个非浮动元素，就会产生覆盖现象。

下面样式会产生重叠现象。

<div class="wrap">
  <div class="side"></div>
  <div class="main"></div>
</div>

  .wrap {
    width: 600px;
    position: relative;
  }
  .side {
    width: 100px;
    height: 150px;
    float: left;
    background: yellow;
  }
  .main {
    height: 200px;
    background: #fcc;
  }

解决方案： 设置main为BFC

 .main {
    overflow: hiddle;
 }

设置BFC的前后对比图：