块级格式化上下文
Block formatting context (简称BFC),其中formatting context是指页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。除了BFC还有,inline formatting context(简称IFC)。
BFC是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部无关。
原理(渲染规则)
- BFC 内部的子元素,在垂直方向,边距会发生重叠。
- BFC在页面中是独立的容器,外面的元素不会影响里面的元素,反之亦然
- BFC区域不与旁边的float box区域重叠。(可以用来清除浮动带来的影响)
- 计算BFC的高度时,浮动的子元素也参与计算。
如何生成BFC?
方法1:overflow: 不为visible,可以让属性是 hidden、auto。【最常用】
方法2:浮动中:float的属性值不为none。意思是,只要设置了浮动,当前元素就创建了BFC。
方法3:定位中:只要posiiton的值不是 static或者是relative即可,可以是absolute或fixed,也就生成了一个BFC。
方法4:display为inline-block, table-cell, table-caption, flex, inline-flex
应用
- 阻止margin重叠
- 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
- 自适应两栏布局
- 可以阻止元素被浮动元素覆盖