BFC相关概念
一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染的一部分。用于决定块盒子的布局及浮动相互影响范围的一个区域。
- 触发BFC
- body 根元素
- 浮动元素：float除none以外的值
- 绝对定位元素：position(absolute、fixed）
- display为inline-block、table-cells、flex
- overflow除了visible以外的值(hidden、auto、scroll)
- 特点
- 内部块级盒子垂直方向排列
- 盒子垂直距离由margin决定，同一个BFC盒子的外边距会-重叠
- BFC就是一个隔离的容器，内部子元素不会影响到外部元素
- BFC 的区域不会与float box叠加
1 | <div>元素A</div> |
