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

Question

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

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

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

与此类似，这如何转换为内联元素和构成内联格式上下文的元素？

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

Answer 1

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

  

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

是。块框（即块级块容器盒）可以建立BFC的标准在CSS2.1的section 9.4.1中说明，即：

• 浮，
• 绝对定位元素，
• “阻止'溢出'除'可见'以外的框（除非该值传播到视口时除外）”（直接从规范中引用）

  

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

既不：

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

  

与此类似，这如何转换为内联元素和构成内联格式上下文的元素？

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

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