本文共 1206 字，大约阅读时间需要 4 分钟。
从 FC 开始
FC 是 W3C CSS2.1 规范中的一个重要概念，定义页面中一块渲染区域，并决定其子元素如何定位及与其他元素的关系。常见的 FC 包括 BFC（块级格式化上下文）和 IFC（行内格式化上下文），还有 GFC（网格布局格式化上下文）和 FFC（自适应格式化上下文）。
页面中的盒子分为块盒和行内盒，不同类型的盒子参与不同的 FC。块盒参与 BFC，行内盒参与 IFC。元素的 display 属性决定了其类型，例如 display: block 创造块盒，display: inline 创造行内盒。
BFC
BFC 的布局规则如下：
内部盒子垂直方向一个接一个放置，距离由 margin 决定，相邻盒子的 margin 会重叠。 盒子左边缘与包含块左边缘相接，除非元素形成新的 BFC。 BFC 区域独立，不与 float 盒重叠。 计算 BFC 高度时，浮动元素也参与。 BFC 的形成条件包括：
- body 根元素
- 浮动元素（float ≠ none）
- 定位元素（position: absolute 或 fixed）
- display 属性为 inline-block、table-cell、table-caption、flex、inline-flex
- overflow 不为 visibility
BFC 的用途：
- 清除浮动：例如，通过设置 overflow: hidden 让父元素形成 BFC，包含浮动盒子，避免高度塌陷。
- 自适应两栏布局：让左侧浮动元素与右侧内容在同一 BFC 内协同工作。
- 防止垂直 margin 合并：通过包裹元素使其形成独立 BFC，阻止 margin 重叠。
IFC
IFC 的布局规则：
- 盒子水平排列，起点为包含盒子的顶部。
- 水平方向 margin、border、padding 保留。
- 垂直方向高度由最高实际高度决定。
- 行框的宽度由包含盒子及浮动决定，高度不受 padding 影响。
- 行内块级元素会产生匿名块，分隔开，表现为块级排列。
IFC 的用途：
- 防止 p 中插入 div：通过设置 inline-block 让 div 作为行内元素。
- 水平居中：通过 inline-block 和 text-align: center。
- 垂直居中：通过 vertical-align: middle。
主要影响 IFC 布局的 CSS 包括 font-size、line-height、height、vertical-align 和 text-align。
GFC 和 FFC
GFC：通过 display: grid 创建独立渲染区域，适用于二维表格布局。Flexbox 则通过 display: flex 创建自适应容器，提供灵活的布局控制。
总结：FC 系统帮助开发者更好地管理页面布局，解决浮动问题、自适应布局、防止 margin 合并等复杂布局需求。
转载地址：http://iiqzz.baihongyu.com/