BFC 块级格式化上下文

Posted 2020-10-11

1.定义
BFC：block formatting context，页面中css渲染的一个部分，主要用于“决定”盒子的布局以及浮动（相互影响的范围）的一个区域。BFC之间互不影响。
2、如何产生BFC（触发BFC）
2-1 根元素
2-2 float值不为none的时候
2-3 position值为absolute或者fixed时
2-4 display值为inline-block、table-cell、table-caption、flex、inline-flex时
2-5 overflow不为visible时
3、触发BFC后，BFC的布局规则：
3-1 内部的块级元素在垂直方向上，一个接一个的放置。（即常规文档流）
3-2 块级元素垂直方向margin重叠，取最大值。（同一个BFC中的两个相邻元素）
3-3 每个元素的margin box的左边，与包含块的border box的左边相接触。（即使浮动也如此）
3-4 BFC的区域不会与float box重叠。
3-5 BFC是一个独立的区域（容器），容器里面的子元素不会影响外面的元素。
3-6 计算BFC的高度时，浮动元素也要参与计算。（eg：子级浮动，父级高度塌陷，要计算父级高度就要加触发条件，overflow：hidden）