一尘不染

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

css

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

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

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

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


阅读 269

收藏
2020-05-16

共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。

2020-05-16