BFC 即 Block Formatting Contexts (块级格式化上下文)
官方文档到中是这么介绍的：一个 BFC 区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC 是一块块独立的渲染区域，可以将 BFC 看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素
具有 BFC 特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的的一些特性。通俗一点来讲，它的作用是创建一个独立的渲染区域，使容器内的元素和容器外的元素的样式不会相互影响
怎样使一个元素变成 BFC 区域
- 1、根元素 <html> 或其他包含它的元素：根元素本身就是 BFC，而其他元素如果包含根元素，则它们也会成为 BFC
- 2、定位元素：元素的 position 属性设置为 absolute 或 fixed，这样的元素会形成 BFC
- 3、浮动元素：元素的 float 属性设置为非 none 的值，如 left 或 right，这样的元素会形成BFC
- 4、具有 overflow 属性的块元素：如果块元素的 overflow 属性值不是 visible，例如设置为hidden、scroll 或 auto，这样的元素会形成 BFC
- 5、display 的值为 inline-block、table-cell、table-caption 或者 flex、inline-flex
可以解决的问题
1、解决外边距的塌陷问题(垂直塌陷)，两个盒子都有 100 的外边距，正常应该是 200 的距离，实际是 100
2、解决包含塌陷，子元素加 margin-top 可能会带着父元素一起跑
3、清除浮动，因为子节点浮动，造成父节点高度塌陷
4、阻止标准流元素被浮动元素覆盖
