Formatting context(格式化上下文)
-
W3C CSS2.1 规范中的一个概念
-
它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
Block Formatting context(块级格式化上下文)
-
具有 BFC 特性的元素可以看作是隔离了的独立容器
-
容器里面的元素不会在布局上影响到外面的元素
-
并且 BFC 具有普通容器所没有的一些特性
BFC 触发条件
- body 根元素
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC 特性
-
同一个 BFC 下外边距会发生折叠
-
BFC 可以包含浮动的元素(清除浮动)
-
BFC 可以阻止元素被浮动元素覆盖
FFC(Flex Formatting Context)、GFC(Grid Formatting Context)
特性
FFC、GFC 内部设置了 margin: auto
的元素,在通过 justify-content
和 align-self
进行对齐之前,任何正处于空闲的空间都会分配到该方向的自动 margin 中去。