CSS的格式化上下文FC(BFC，IFC，FFC，GFC)

2024-08-25科技

前言

在前端开发中，我们可以用 CSS 设置元素的样式，美化界面，也可以用 CSS 设置元素布局，即格式化上下文( Formatting Context )，简称为 FC

盒模型-BOX

我们的页面是由一个个元素组成的，渲染时会将其抽象为一个个的 盒(BOX) 进行布局渲染

元素的类型和 display 属性，决定了一个 Box 的类型

不同类型的 Box ，会参与组成不同的 FC

我们可以在浏览器控制台输入以下代码，标注查看当前页面的所有盒(BOX)：

如下图，盒子模型主要由四部分组成：

内容区(Content) ：实际内容显示的区域，它的大小可以通过 width 和 height 属性来设置

内边距(Padding) ：内容区与边框之间的空间，可以通过 padding 属性来设置， padding 不透明且会影响元素的实际尺寸

边框(Border) ：环绕在内边距之外的边界，可以通过 border 属性来设置，边框的宽度会增加元素的总尺寸

外边距(Margin) ：边框之外的空间，可以通过 margin 属性来设置，外边距透明并且不影响元素的实际尺寸，但会影响元素之间的距离

每个 Box 都有一个 内容区 ，并可选配 内边距 、边框和 外边距 (其值可为零，边距值可为负数)

内边距 、边框和 外边距 都可分解为上下左右四个段，并且可以分开独立控制其属性

Box-Sizing属性

box-sizing 属性规定了 Box 的计算方式：

content-box(默认值)： width 和 height 只包含内容区， 不包括内边距、边框和外边距

border-box： width 和 height 包含内容区、内边距和边框，但 不包括外边距

冷知识： display 属性有 32 个可选值

格式化上下文-FC

Formatting context(FC：格式化上下文) ，是 W3C CSS2.1 规范中的一个概念

它是页面中的一块渲染区域，并且有一套渲染规则，其决定了元素是如何排布、对齐和交互的

常见的 FC 有：

BFC — 块级格式化上下文(Block Formatting Context)

IFC — 行内格式化上下文(Inline Formatting Context)

GFC — 网格格式化上下文(Grids Formatting Context)

FFC — 弹性盒 格式化上下文(Flexible Formatting Context)

其中，GFC和FFC就是CSS3引入的新布局模型

BFC

BFC ，即块级格式化上下文，用于控制块级元素布局，每个 BFC 都是一个独立的渲染区域，元素在这个区域内按照一定的规则进行布局，互不影响

特性

外边距折叠 ：同一个BFC内的相邻块级元素的上下外边距会合并(重叠)，以较大的为准

包含浮动元素 ：BFC可以包含浮动元素，不会被浮动元素影响(利用该特性可清除浮动)，计算BFC的高度时，其内的浮动元素也参与计算

防止文字环绕浮动元素 ：BFC区域(BFC内的块级盒子)不会与浮动元素区域重叠

创建方式

float 属性不为 none

position 属性为 absolute 或 fixed

display 属性为 inline-block 、 table-cell 、 table-caption 、 flex 、 inline-flex 、 flow 或 flow-root

overflow 属性不为 visible (即为 hidden 、 scroll 和 auto )

应用场景

清除浮动

防止外边距折叠

包含浮动元素

应用举例

如上图，有a、b两个盒子，a盒子有30的下外边距，b盒子有50的上外边距，两者相邻只展示50外边距(即30与50重叠，展示较大的)

如不想重叠，可以给a或b外部再包围一个父级盒子，然后将其创建为一个新的 BFC ，如下：

IFC

IFC ，即行内元素格式化上下文，按照行框模型进行布局， IFC 中的元素会水平排列成一行或多行，每一行称为一个行框( line box )；一个 IFC 可以有多个行框

特性

水平排列 ：行内元素在水平方向上排列，直到当前行容不下更多元素为止，然后换行；水平方向的 padding 、 border 、 margin 都有效，垂直方向的不被计算

水平对齐 ：可以通过 text-align 属性来控制行内元素的水平对齐方式

浮动优先排列 ：行框的宽度是由包含块和与其中的浮动元素来决定，一般情况从左到右按先后顺序排列，但 float元素会优先排列

不破坏文档流 ：IFC不会影响块级元素的布局，不会创建新的BFC

创建方式

行内元素或 display: inline;

应用场景

行内元素的排列和对齐

控制文字和行内元素的布局

FFC

FFC 是由 Flexbox 布局创建的格式化上下文， Flexbox 布局是一种用于 一维布局 的强大工具，可以方便地对齐和分布容器内的元素，无论是垂直还是水平方向

特性

弹性盒模型 ：在FFC中，子元素称为弹性项目( flex items )，它们可以根据可用空间灵活地调整自己的大小

主轴和交叉轴 ：FFC有两个轴，主轴( main axis )和交叉轴( cross axis )，元素可以沿着这两个轴进行排列

对齐和分布 ：可以使用各种属性如 justify-content 、 align-items 和 align-content 来控制弹性项目的对齐和分布方式

创建方式

将 display 属性设置为 flex 或 inline-flex

应用场景

创建响应式布局

水平和垂直居中

动态调整元素大小

GFC

GFC ，即由 Grid 布局创建的格式化上下文， Grid 布局是一种用于 二维布局 的强大工具，可以精确地控制容器内元素的排列和对齐

特性

网格模型 ：在 GFC 中，容器被划分为行和列，子元素称为网格项目( grid items )，可以放置在任意网格单元格中

行和列的定义 ：可以使用 grid-template-rows 和 grid-template-columns 来定义网格的行和列

区域和单元格的对齐 ：可以使用 grid-area 、 justify-items 和 align-items 等属性来控制网格项目的排列和对齐

创建方式

将 display 属性设置为 grid 或 inline-grid

应用场景

创建复杂的页面布局

精确控制元素的位置和对齐

响应式设计

参考资料

CSS Box Level： https://www.w3.org/TR/css-box-3/#intro

CSS Display： https://www.w3.org/TR/css-display-3/