块级元素与块格式化上下文

Question

作为块级元素的HTML元素和形成块格式上下文的HTML元素之间有什么区别？

HTML元素既可以是块级元素又可以形成块格式化上下文吗？

作为块级元素是否意味着它形成了一个块格式化上下文，或者相反，形成一个块格式化上下文就意味着它必须是一个块级元素吗？

同样，这如何转换为内联元素和形成内联格式上下文的元素？

Answer 1

请注意，此答案使用术语“盒子”代替“元素”，因为CSS区分了元素和盒子。出于此答案的目的，HTML元素由CSS布局中的单个框表示。实际上，一个元素可以生成任意数量的框（或者根本不生成框display: none），但这超出了此问题的范围。

HTML元素既可以是块级元素又可以形成块格式化上下文吗？

是。CSS2.1的第9.4.1节中陈述了块状盒子（即块级块状容器盒子）可以建立BFC 的标准，即：

• 漂浮
• 绝对定位的元素，以及
• “阻止具有“可见”以外的“溢出”的盒子（除非该值已传播到视口）（直接从规范中引用）

作为块级元素是否意味着它形成了一个块格式化上下文，或者相反，形成一个块格式化上下文就意味着它必须是一个块级元素吗？

都不：

1. 上面的答案暗示并非所有的块框都建立块格式化上下文。具有CSS属性display: block; overflow: visible; float: none; position: static（或position: relative）的阻止框不会建立BFC。
2. 相反，内联块是建立BFC的框的示例，但它本身是内联级别的，而不是块级别的。

同样，这如何转换为内联元素和形成内联格式上下文的元素？

内联框是内联级别的框，其内容直接参与其父级的内联格式设置上下文中（请参见9.4.2节）。值得注意的是， 唯一 可以建立内联格式上下文的框是块容器框。

内联框和内联块之间的区别在于，内联块的内容参与它所建立的BFC，而不是父级IFC。相反，只有内联块本身会参与其父级的IFC。