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

Question

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

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

成为块级元素是否意味着它形成了块格式化上下文，或者反过来，形成块格式化上下文是否意味着它必须是块级元素？

类似地，这如何转化为内联元素和形成内联格式化上下文的元素？

（为了一些背景，我一直在尝试阅读 Learn CSS Layout-The Pedantic Way，但第一章有点难以理解。）

- wmock

Answer 1

请注意，本答案使用“盒子”代替“元素”，因为CSS在元素和盒子之间有区别。对于本答案而言，HTML元素在CSS布局中由一个单独的盒子表示。实际上，一个元素可以生成任意数量的盒子（或根本不生成，例如display: none），但这超出了本问题的范围。

一个HTML元素既可以是块级元素，也可以形成块级格式化上下文吗？

是的。块级盒子（即块级块容器盒子）可能建立BFC的标准在CSS2.1的第9.4.1节中说明，即：

- 浮动元素， - 绝对定位元素，以及 - “除了'visible'之外的'overflow'的块级盒子（当该值已传播到视口时除外)”（直接引用自规范）

成为块级元素是否意味着它形成块级格式化上下文？反之亦然，形成块级格式化上下文是否意味着它必须是块级元素？

不是所有的块级盒子都会建立块级格式化上下文，具有以下CSS属性的块级盒子 display: block; overflow: visible; float: none; position: static（或position: relative）不会建立BFC。

相反，inline-block是建立BFC的盒子之一，但它本身是内联级别而不是块级别。

类似地，这如何转换为内联元素和形成内联格式化上下文的元素？

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

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

- BoltClock

---

@wmock：块级框是指参与某个其他元素的BFC（无论它是否建立自己的BFC），或更简单地说，参与块布局的任何框。可以通过许多因素来确定，参见§9.7，但主要取决于display属性。任何block、table或flex中的任何一个都会生成块级框（块框、块级表格或块级flex容器）。还请参见此问题。 - BoltClock

如果我没错的话，块级框仅意味着它参与块布局，除此之外没有其他含义。 - BoltClock

@BoltClock 只是确认一下，参与块布局只意味着该框及其兄弟框将垂直堆叠在彼此之上，对吗？ - wmock

@wmock：是的，在正常流程中。但是一旦您将块级框从正常流程中移出（例如通过浮动或绝对定位），情况就有些不同了。 - BoltClock

@wmock：块级容器框（块级盒子、内联块级或表格单元格）会根据需要自动为其内联后代形成内联格式化上下文。 - BoltClock