什么是BFC
BFC（Block Formatting Context）块格式化上下文，它规定了内部的 block-level box 如何布局。BFC是页面上的一个隔离的独立容器，这个容器的内外的布局相互不受影响。BFC默认是关闭的，但可以手动打开。
w3c文档关于BFC的描述：9.4.1 Block formatting contexts
如何创建BFC
- 常用的块级格式化上下文创建方式
- 根元素(<html>)
- 浮动元素
- 绝对定位元素 (position 为 absolute 或 fixed)
- 具有 display: inline-block，flex等的元素
- 块级元素具有overflow ，且值不是 visible
更多方式见MDN创建新的块格式上下文
- 推荐方式：以上几种方式，将overflow设置为hidden是副作用最小的开启BFC的方式。
- 补充：CSS中的一个新属性
diaplay:flow-root可以为当前容器创建新的BFC，详见此
BFC布局规则
- 当开启元素的BFC以后，元素将会具有如下的特性：
- 内部的 Box会在垂直方向，从上到下依次排列（html自动开启BFC，所以块级元素独占一行）
- Box 垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（margin重叠问题）
- 计算BFC的高度时，浮动元素也参与计算
- BFC的区域不会与float box重叠（自适应两栏布局）
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
常见应用
- margin折叠
- 自适应两栏布局
- 清除浮动
