BFC:块级格式化上下文,独立渲染的区域
触发条件(脱离文档流)
1. overflow:hidden/scroll/auto;
2. float: left/right
3. position: absolute/fixed
4. display: inline-block/table-caption(表格标题)/table-cell(表格单元格)/flex(弹性盒)/inline-flex(内联弹性盒)
特性
1. 在BFC的区域内,浮动元素的高度会计算在内----》 解决高度塌陷
2. BFC的区域不会和浮动元素重叠----》 解决浮动给后面元素带来的影响
3. BFC区域内的元素不会影响到外面的元素 ----》 解决margin的重叠