Block Formatting Context 能帮助我们做什么?

Block Formatting Context(块格式化上下文)是个很重要的概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

举个好理解的例子:可以把页面想象成一个社区,这个社区里的建筑就是 HTML 元素。而为了避免不同社区里的建筑相互混淆,开发商都是把建筑建在自己的社区里,这样的话无论开发商怎么盖楼,都不会影响到其它社区,那么这个社区的范围就可以被想象成 Block Formatting Context。

由于在 IE8 之前的 IE 版本中,规范中没有提及 Block Formatting Context 的概念,而是用私有属性 hasLayout 来达到相似的目的。两者都是决定了对内容如何定位及大小计算的规则,以及与其它元素的相互作用的规则,但它们对一类事物的不同理解,以及它们的启用条件也都不尽相同,所以很多兼容性的问题都是因它而起。

可生成 Block Formatting Context 的 CSS 特性:

  • float: ( 除 none 外的任何值 )
  • overflow: ( 除 visible 外的任何值 )
  • display: ( table-cell,table-caption 或 inline-block )
  • position: ( 除 relative 和 static 外任意值 )

可触发 hasLayout 的 CSS 特性:

  • display: inline-block
  • height: ( 除 auto 外任何值 )
  • width: ( 除 auto 外任何值 )
  • float: ( left 或 right )
  • position: absolute
  • writing-mode: tb-rl
  • zoom: ( 除 normal 外任意值 )

继续阅读 Block Formatting Context 能帮助我们做什么?