BFC(Block Formatting Context)

BFC(Block Formatting Context)是一个独立的渲染区域，让处于BFC内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响。

触发条件：

根元素(<html>)
position : absolute , fixed;
overflow !== visible
float !== none
display : flow-root, inline-block, table, inline-table, table-cell, table-caption, table-row, table-row-group, table-header-group, table-footer-group
display : flex, inline-flex, grid, inline-grid 的直接子元素

规则：

属于同一个BFC的两个相邻的Box垂直排列
属于同一个BFC的两个相邻的Box的外边距会合并(Mastering Margin Collapsing)
BFC 中子元素的margin box的左边与包含块(BFC)border box的左边相接触（子元素absolute除外）
BFC的区域不会与float元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
文字层不会被浮动层覆盖，环绕与周围

应用：

让浮动内容和周围的内容等高

.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}      
<div class="box">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the container.</p>
</div>

效果：

设置 overflow: auto 创建一个新的BFC来包含这个浮动

.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    overflow: auto; // 创建BFC
}

效果：

解决外边距合并

.yellow, .pink-inner {
  height: 50px;
  margin: 10px 0;
}

.yellow {
  background: yellow;
}
.pink-inner{
  background:pink;
}

效果（yellow inner 和 pink inner 的边距为10px，不是20px）：

设置display: flow-root 创建一个新的BFC

.pink-outer {
  display: flow-root;
}

效果（yellow inner 和 pink inner 的边距为20px）：