BFC (块级格式化上下文)

BFC (块级格式化上下文)

BFC简述： BFC即 Block Formatting Contexts (块级格式化上下文)，是 W3C CSS2.1 规范中的一个渲染规范，是页面中的一块渲染区域并且有自己独有的渲染规则，决定了子元素的渲染位置以及和其他元素之间的关系和相互作用。
BFC规则：

1. 同一BFC内的块元素的上边的边距重叠
2. 规定了包含元素的margin值和自己父容器的边缘接触
3. BFC的区域和以外的元素没有任何影响
4. BFC的区域能够解析浮动元素的高度

BFC可解决的问题：

1. 相邻元素上下边距重叠
2. 子元素的margin-top解析到自己身上
3. 高度塌陷
4. 实现自适应的两栏布局

触发BFC的条件：

1. overflow：不为visible
2. float：不为none
3. position：absolute或fixed
4. display：inline-block，table-cell，flex，inline-flex

注意： html标签在浏览器中默认就是按BFC规则解析的