BFC格式化上下文
- 它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
- BFC的区域不会与float box重叠。
- 计算BFC的高度时，浮动元素也参与计算
- 举例：当一个盒子没有设置高度，其内容子元素浮动时，无法撑起自身，这个盒子没有形成BFC
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 如何创建
- float的值不是none
2.position的值不是static或者relative
3.display的值是inline-block、flex或者inline-flex
4.overflow:hidden
- BFC的其他作用
1.取消盒子的margin塌陷
2.可以阻止元素被浮动元素覆盖 - 实际应用
1.两栏布局
