对BFC的理解

it2022-05-06  0

BFC

概念:

中文名为“块级格式化上下文”,它是block formatting context的缩写。 它是一个独立的渲染区域,(Block-level box)规定内部的Block-level Box如何布局,并且与外部没有任何关系。

如何触发BFC:

设置float除none以外的值;设置display(如inline-block,flex,table-cell);设置overflow除visible以外的值(hidden,scroll,auto);设置position(如absolute,fixed);

BFC的作用:

解决上下margin重叠问题 给设置margin的元素再嵌套一个盒子,并设置overflow:hidden;此时,为里面设置margin的元素创建了一个块级格式化上下文解决高度塌陷问题 子元素浮动脱离文档流,导致父元素高度为0;此时,给父元素添加overflow:hidden触发了,给浮动的子元素创建了块级格式化上下文,闭合了浮动实现多栏布局 用于布局与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种

最新回复(0)