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

【问题标题】：Block Level Element vs Block Formatting Context块级元素与块格式化上下文
【发布时间】：2016-05-08 19:18:48
【问题描述】：

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

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

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

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

（在某些情况下，我一直在尝试阅读 Learn CSS Layout - The Pedantic Way，但遵循第 1 章有点困难）

【问题讨论】：

标签： html css

【解决方案1】：

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

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

是的。 CSS2.1的section 9.4.1中规定了块盒（即块级块容器盒）可以建立BFC的标准，即：

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

都不是：

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

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

内联框是一个内联级框，其内容直接参与其父级的内联格式化上下文（请参阅section 9.4.2）。值得注意的是，只有可以建立内联格式化上下文的盒子是块容器盒子。

inline box 和 inline-block 的区别在于 inline-block 的内容参与了它建立的 BFC，而不是父级的 IFC。相反，只有 inline-block 本身参与其父级的 IFC。

【讨论】：

第 1 点是否应该说“具有 CSS 属性 display: block; overflow: visible; float:none; position:static; 的块框不建立 BFC？
@wmock：块级盒子是任何参与其他元素的 BFC 的盒子（无论它是否建立它自己的），或者更简单地说，参与块布局。它可以由许多事情决定，请参阅§9.7，但它主要归结为display 属性。 block、table 或 flex 中的任何一个都会生成块级盒子（分别是块盒子、块级表或块级弹性容器）。另见this question
@wmock：如果我没记错的话，块级框除了参与块布局这一事实之外并没有其他任何含义。
@wmock：是的，在正常流程中。一旦您将块级框从正常流程中拉出（例如，通过浮动或替换它），情况就会有所不同。
@wmock：块容器框（块框、内联块或表格单元格）会根据需要为其内联后代自动形成内联格式化上下文。