14
2020
12

对 BFC 规范(块级格式化上下文:block formatting context)的理解?

(W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。)


一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。


不同类型的 Box,会参与不同的 Formatting Context(决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。


BFC 规定了内部的 Block Box 如何布局。


定位方案:


内部的 Box 会在垂直方向上一个接一个放置。

Box 垂直方向的距离由 margin 决定,属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。

每个元素的 margin box 的左边,与包含块 border box 的左边相接触。

BFC 的区域不会与 float box 重叠。

BFC 是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

计算 BFC 的高度时,浮动元素也会参与计算。

满足下列条件之一就可触发 BFC


根元素,即 html

float 的值不为none(默认)

overflow 的值不为 visible(默认)

display 的值为 inline-block、table-cell、table-caption

position 的值为 absolute 或 fixed

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。