什么是块级格式化上下文(BFC),如何工作

1.规范解释

块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成

块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

2.通俗解释:

BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境

中的物品。

如果一个元素符合触发BFC的条件,则该元素中的布局不受外部影响。

浮动元素会创建BFC,所以浮动元素内部子元素主要受浮动元素影响,两个浮动元素之间是互不影响的。

3.创建方式:

根元素或包含根元素的元素

浮动元素 float = left | right 或 inherit(≠ none)

绝对定位元素 position = absolute 或 fixed

display = inline-block | flex | inline-flex | table-cell 或 table-caption

overflow = hidden | auto 或 scroll (≠ visible)

发表评论

后才能评论