BFC（Block Formatting Contexts 块级格式化上下文）基础理解

触发条件：
1、body 根元素
2、浮动元素：float 除 none 以外的值
3、绝对定位元素：position (absolute、fixed)
4、display 为 inline-block、table-cells、flex、grid
5、overflow 除了 visible 以外的值 (hidden、auto、scroll)

作用：
1、两栏或三栏自适应布局 （float div ，div2 BFC同层展示）
2、解决父容器高度塌陷（计算高度时候浮动元素参与计算）
3、解决垂直方向 margin 重叠，用一个BFC层封装内部元素（同BFC下内容相邻的margin会重叠）

新特性：
display: flow-root
创建无副作用的BFC

额外：
1、对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置；
2、对于相对定位(relative positioning)，position: relative，盒偏移位置由top、bottom、left、right属性定义。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。