Block Formatting Context是什么?

今天翻看博客时,偶然看到一个面试题,在解答过程中说到了"BFC",遂百度之.发现自己真是孤陋寡闻了.

1.Block Formatting Context 是什么?

BFC=Block Formatting Context(块格式化上下文),它是CSS中一个重要的概念,理解了它,我们也就能好的理解一些布局.下面是来自Mozilla Developer Center的定义.

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

2.触发条件

• root元素
• float(none以外的值)
• position(absolute或fixed)
• display等于inline-block
• display等于table-cell
• display等于table-caption
• overflow(除了visible以外的值)
• flex boxes(display等于flex或inline-box)

3.Block Formatting Context的作用

1. Block Formatting Context会阻止边距折叠
2. Block Formatting Context可以包含内部元素的浮动
3. Block Formatting Context可以阻止元素覆盖浮动盒模型

4.更多资料

以上是一些基础概念,更详细的介绍可以在下面的链接中查看

• hasLayout && Block Formatting Contexts
• Block Formatting Context 能帮助我们做什么？

版权声明：本文为原创文章，版权归 neo 所有。

本文链接：https://idayer.com/block-formatting-context-is-what/

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。