BFC（边距塌陷）

BFC（边距重叠解决方案）

1. 父子元素边距重叠
2. 兄弟元素边距重叠
3. 空元素边距重叠

BFC的基本概念

块级格式化上下文

BFC的原理（BFC的渲染规则）

1. BFC元素垂直方向的边距发生重叠
2. BFC的区域不会与浮动元素的box重叠
3. BFC是页面上一个独立的容器，内外的元素不会相互影响
4. 计算BFC的高度时，浮动元素也参与计算。

如何创建BFC
1. float值不为none
2. position为absolute或fixed
3. display为inline-block，table-cell，table-caption，flex；
4. overflow不为visible

我通常经常用到的就是
overflow:hidden;
但是这个属性会使超出盒子的部分隐藏，因此如果有这种不隐藏超出盒子部分的要显示的需求，就不要用这个属性了。
可以使用经典的解决方案

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}

<div class="clearfix">
  <div class="floated"></div>
</div>