【前端】CSS格式化上下文详解

---

    博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳]     本文专栏:  前端   

---

  

---

---

前言

• 在现代网页布局中，CSS 格式化上下文（FC）扮演着至关重要的脚色。理解和运用不同类型的格式化上下文，不仅能资助开发者掌控元素的排列和布局，还能有效解决诸如浮动清除、外边距重叠、相应式布局等常见布局题目。通过深入探究块级格式化上下文（BFC）、内联格式化上下文（IFC）、自顺应格式化上下文（FFC）以及网格布局格式化上下文（GFC）的特性和应用，本文将为您展现在复杂页面布局中，如何利用这些布局机制实现高效、机动的网页计划。
  
• Introduction to formatting contexts 格式化上下文简介
  
  
  
  

---

1 什么是格式化上下文？

格式化上下文（Formatting Contexts，简称 FC）是 CSS2.1 规范中非常重要的一个概念。它定义了元素在页面上的一块渲染区域，以及元素在这个区域内的布局方式，决定了其子元素如何定位和布局，以及子元素与其他元素之间的关系和相互作用。
CSS 格式化上下文包括多种类型，例如块级格式化上下文（BFC）、内联格式化上下文（IFC）、自顺应格式化上下文（FFC）和网格布局格式化上下文（GFC）。每种格式化上下文都有其特定的布局规则和用途，它们之间的区别和作用在现实开发中至关重要。

---

1.1 块级格式化上下文（BFC）

BFC（Block Formatting Context）即块级格式化上下文。它是一种独立的渲染区域，其内部的元素不会对外部元素产生布局影响，反之亦然。BFC 的概念在解决页面布局题目时非常有效，尤其是清除浮动、处理外边距重叠等场景。
BFC 的主要特点是：

• 块级元素垂直排列：BFC 内部的元素从顶端开始垂直地一个接一个地排列。每个元素的顶部紧接着前一个元素的底部。
  
• 外边距重叠：属于同一个 BFC 的两个相邻块级元素之间的垂直外边距会发生重叠，这是 CSS 中一个常见的题目。
  
• 隔离布局影响：BFC 区域内的布局不会受到外部元素的影响，这使得它在某些情况下成为解决布局题目的有效工具。
  
• 清除浮动：BFC 可以包罗浮动元素，从而避免浮动元素的影响。例如，通过触发 BFC，可以避免父元素高度塌陷的题目。
  

---

1.1.1 BFC 的触发条件

要形成 BFC，必须满足以下条件之一：

• 浮动元素：float 属性不为 none，即元素设置了浮动。
  
• 绝对定位或固定定位：position 属性为 absolute 或 fixed。
  
• 块级元素的 display 属性为 inline-block：例如 display: inline-block、display: table-cell 等。
  
• overflow 属性不为 visible：设置 overflow: hidden、overflow: scroll 或 overflow: auto，都可以触发 BFC 的创建。
  

这些条件会导致元素变成一个独立的渲染区域，内部的布局规则和外部的布局规则分离。

---

1.2 内联格式化上下文（IFC）

IFC（Inline Formatting Context）即内联格式化上下文。它是行内元素及其盒模型（Box Model）到场布局的渲染区域。在 IFC 中，元素会按照行内元素的特性举行布局，形成多个行框（line box）。行框的高度是由该行内包罗的元素的高度决定的。
IFC 的一些关键特性：

• 行内元素的高度：IFC 中行框的高度由行内元素的现实内容高度决定，而不是通过垂直方向的 padding 或 margin 来影响。
  
• 浮动的干扰：在 IFC 中，如果有浮动元素存在，那么行框会由于浮动元素而受到影响，行框会围绕浮动元素排列。
  

通常，IFC 主要用于处理文本内容及其在页面中的排布，特殊是在有复杂排版需求时，比如图文混排的场景。

---

1.3 自顺应格式化上下文（FFC）

FFC（Flex Formatting Context）即自顺应格式化上下文，是 CSS Flexbox 布局的根本。设置 display 属性为 flex 或 inline-flex 的元素，会创建一个 Flex 容器（flex container），该容器内部的所有子元素被称为伸缩项目（flex items）。
Flexbox 是一种一维的布局模型，这意味着它专注于在一个方向上对元素举行布局，可以是水平的（行）也可以是垂直的（列）。

---

1.3.1 FFC 的特点

• 弹性布局：FFC 可以根据容器大小动态调解伸缩项目的大小和排列方式，得当用来创建相应式布局。
  
• 空间分配：FFC 可以机动地分配剩余空间，通过属性如 justify-content、align-items 等控制子元素的对齐方式。
  
• 方向控制：通过 flex-direction 属性，可以控制伸缩项目的排列方向（水平或垂直）。
  

FFC 的强大之处在于其机动性，它非常得当现代 Web 开发中的相应式布局需求，特殊是当页面需要根据视口宽度举行动态调解时。

---

1.4 网格布局格式化上下文（GFC）

GFC（Grid Formatting Context）即网格布局格式化上下文，是 CSS Grid 布局的根本。通过将元素的 display 属性设置为 grid 或 inline-grid，该元素会得到一个独立的网格容器（grid container），可以在其中定义网格的行和列，以及每个网格项目（grid item）的布局位置。
GFC 提供了一种二维的布局方式，与 FFC 不同，它可以同时处理水平和垂直方向的布局，使得复杂的页面布局变得更加简洁和直观。

---

1.4.1 GFC 的特点

• 二维布局：GFC 可以在水平和垂直两个方向上同时定义布局，这使得它非常得当复杂的页面结构，比如数据表格和仪表板等。
  
• 自动排列：网格布局的一个重要特性是可以自动排列网格项目，通过 grid-template-columns 和 grid-template-rows 来定义行列的大小。
  

与 FFC 相比，GFC 的主要上风在于其二维的布局能力，而 FFC 更得当处理一维的弹性布局需求。

---

1.5 FFC 和 GFC 的区别

FFC 和 GFC 在使用场景和特性上有明显差异：

• 维度：FFC 实用于一维布局（水平或垂直），而 GFC 是二维布局（同时控制行和列）。
  
• 使用场景：FFC 更加机动，得当相应式布局和弹性元素排列；GFC 则更得当复杂的页面结构，需要在两个方向上同时举行布局的情况。
  

---

2 BFC 的形成条件

如前文提到，BFC 是一种独立的渲染区域，其形成需要满足特定条件。这些条件不仅影响元素的渲染方式，还在很多场景下可以用来解决常见的 CSS 布局题目。以下是 BFC 形成的几种常见方式：

• 浮动元素：将元素的 float 属性设置为 left 或 right，即可创建一个 BFC。这种方法通常用于浮动布局，常用于实现左右并排的布局效果。
  
• 绝对定位或固定定位：设置 position 为 absolute 或 fixed，该元素也会创建一个 BFC。绝对定位元素脱离文档流，因此它与其他元素的布局相互隔离，天然地形成 BFC。
  
• display: inline-block：将元素的 display 设置为 inline-block，该元素也会形成 BFC。这种方式将块级元素的特性和行内元素的特性联合起来，特殊得当一些需要水平对齐的场景。
  
• overflow 属性：当元素的 overflow 属性被设置为非 visible 时（例如 hidden、scroll、auto），它也会形成一个 BFC。这种方式常用于解决父元素高度塌陷的题目。
  

通过这些方式创建 BFC，可以让我们更好地控制页面的布局，特殊是在需要隔离元素之间的影响时，BFC 提供了一种非常有效的解决方案。

---

3 BFC 的特性与规则

BFC 有着一些独特的布局规则，这些规则决定了在 BFC 内部的元素如何排列与相互作用。

---

3.1 垂直排列规则

在 BFC 中，块级盒子会从顶部开始垂直地一个接一个地排列，这意味着每个盒子的顶部会紧接着前一个盒子的底部，形成天然的垂直堆叠序次。不同于内联元素，块级元素的排列方式更为直观。

---

3.2 外边距折叠（Margin Collapsing）

在同一个 BFC 中，相邻块级元素的垂直外边距会发生折叠。也就是说，如果两个相邻元素的外边距分别是 margin-top: 20px 和 margin-bottom: 30px，那么它们之间的现实距离是较大的谁人值，即 30px，而不是两者的和。
这种外边距折叠的机制在很多场景下会带来困扰，特殊是在处理多个相邻元素的布局时。通过触发 BFC，我们可以避免这种外边距的重叠。

---

3.3 浮动元素与 BFC 的关系

BFC 的区域不会与浮动盒子重叠。在 BFC 中，盒子会避开浮动元素的区域，而紧贴浮动元素的边缘。这意味着，如果一个元素触发了 BFC，那么它内部的内容不会由于外部的浮动元素而被覆盖，而是会绕开浮动元素。
这一特性使得 BFC 成为处理浮动布局的重要工具。例如，当我们使用浮动布局时，如果父元素没有包罗浮动元素的高度，可能会导致布局错乱。通过使父元素触发 BFC，可以自动包罗浮动元素，从而解决高度塌陷的题目。

---

3.4 高度盘算与包罗浮动

在盘算 BFC 的高度时，BFC 会包罗其内部所有元素的高度，包括浮动元素。这也是 BFC 解决高度塌陷题目的根本原因之一。通常情况下，如果父元素内部的所有子元素都是浮动的，父元素的高度会变为 0，但如果父元素形成了 BFC，那么它会正常盘算包罗浮动子元素的高度。

---

4 BFC 的主要用途

BFC 在现实开发中的用途非常广泛，尤其是在处理一些复杂布局题目时，BFC 提供了一种简洁高效的解决方案。

---

4.1 清除浮动影响

清除浮动是 BFC 最常见的应用场景之一。通常情况下，使用浮动布局的元素会脱离文档流，从而导致父元素高度塌陷。通过使父元素形成 BFC，可以自动包罗所有浮动子元素，从而避免高度塌陷。
例如：

1. .container {
2.   overflow: hidden;
3. }

复制代码

通过设置 overflow: hidden，父元素 .container 会形成一个 BFC，从而包罗所有的浮动子元素，解决高度塌陷题目。

---

4.2 处理外边距重叠

BFC 也可以用来解决相邻元素之间的外边距重叠题目。由于 BFC 的独立性，它可以防止相邻元素之间的外边距折叠，从而避免不须要的布局题目。
例如：

1. .element {
2.   overflow: hidden;
3.   margin-bottom: 20px;
4. }

复制代码

通过触发 BFC，可以确保元素的外边距不会与相邻元素发生重叠。

---

4.3 实现自顺应布局

BFC 还可以用于实现两栏、三栏等自顺应布局。通过使用浮动和 BFC，可以使页面元素根据容器的大小举行自顺应排列，得当相应式计划。
例如：

1. .left {
2.   float: left;
3.   width: 200px;
4.   height: 300px;
5.   background: red;
6. }
7. .right {
8.   overflow: hidden;
9.   height: 300px;
10.   background: blue;
11. }

复制代码

在这个例子中，左侧元素设置了浮动，右侧元素通过设置 overflow: hidden 形成 BFC，从而避免了与浮动元素的重叠，实现了左右布局的效果。

---

5 HTML 扩散举动与 BFC 形成

在 CSS 中，HTML 和 body 元素的 overflow 属性之间存在一种扩散举动，这种举动会影响 BFC 的形成。

---

5.1 扩散的概念

HTML 元素的 overflow 属性的值会扩散给 body 元素，默认情况下，HTML 的 overflow 为 visible，如果不手动设置，body 的 overflow 也会是 visible。

---

5.1.1 情况分析

• 情况 1：body { overflow: hidden; }，html { overflow: visible; }
  在这种情况下，由于 HTML 的 overflow 仍然是 visible，它会扩散给 body，导致 body 的最终 overflow 也是 visible，以是 body 并没有形成 BFC。
  
• 情况 2：html, body { overflow: hidden; }
  这里 HTML 和 body 的 overflow 都设置为 hidden，HTML 的 overflow 设置影响视口，而 body 的 overflow 盘算值为 hidden，因此 body 形成了 BFC。
  
• 情况 3：给 body 设置 display: inline-block 或 position: absolute，或者浮动
  在这种情况下，这些属性会导致 body 正常创建 BFC，由于它们符合触发 BFC 的条件。
  

---

5.2 现实应用中的注意事项

在现实开发中，理解 HTML 与 body 的扩散举动对于正确触发 BFC 至关重要，特殊是在需要确保某些容器形成独立渲染上下文时，必须同时为 HTML 和 body 设置合适的属性，以避免不测的题目。

---

小结

• 
  
  格式化上下文是 CSS 中一个非常核心的概念，通过理解和使用不同类型的格式化上下文，可以解决很多复杂的布局题目。BFC、IFC、FFC 和 GFC 各有各的用途和特点：
  
• BFC 用于块级布局，特殊得当解决浮动、外边距重叠等题目。
  
• IFC 用于内联元素布局，得当处理复杂的文本排版。
  
• FFC 提供了一种机动的一维布局方式，得当相应式计划和自顺应布局。
  
• GFC 提供了一种强大的二维布局方式，得当复杂的页面结构。
  

在实践中，了解这些格式化上下文的触发条件和特性，可以资助开发者更加有效地控制页面元素的排列和布局，从而创建出更加精美和复杂的网页界面。

---

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。