【前端】CSS格式化上下文详解
https://i-blog.csdnimg.cn/direct/cb7f73cda1a14130840e356cb0b6f9e4.png#pic_center博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏:前端
https://img-blog.csdnimg.cn/direct/00d4fdeb7b0d4dbb99e88f325ef249d8.gif#pic_center
前言
[*]在现代网页布局中，CSS 格式化上下文（FC）扮演着至关重要的脚色。理解和运用不同类型的格式化上下文，不仅能资助开发者掌控元素的排列和布局，还能有效解决诸如浮动清除、外边距重叠、相应式布局等常见布局题目。通过深入探究块级格式化上下文（BFC）、内联格式化上下文（IFC）、自顺应格式化上下文（FFC）以及网格布局格式化上下文（GFC）的特性和应用，本文将为您展现在复杂页面布局中，如何利用这些布局机制实现高效、机动的网页计划。
[*]Introduction to formatting contexts 格式化上下文简介
https://i-blog.csdnimg.cn/direct/4fe1ec084229494f84eb4bd523edb003.png#pic_center
1 什么是格式化上下文？
https://i-blog.csdnimg.cn/direct/4b4099dcd0a246048783555f645fbefc.png#pic_right
格式化上下文（Formatting Contexts，简称 FC）是 CSS2.1 规范中非常重要的一个概念。它定义了元素在页面上的一块渲染区域，以及元素在这个区域内的布局方式，决定了其子元素如何定位和布局，以及子元素与其他元素之间的关系和相互作用。
CSS 格式化上下文包括多种类型，例如块级格式化上下文（BFC）、内联格式化上下文（IFC）、自顺应格式化上下文（FFC）和网格布局格式化上下文（GFC）。每种格式化上下文都有其特定的布局规则和用途，它们之间的区别和作用在现实开发中至关重要。
1.1 块级格式化上下文（BFC）
https://i-blog.csdnimg.cn/direct/e5719d40790e4092b569ae88e07428ea.png#pic_right
BFC（Block Formatting Context）即块级格式化上下文。它是一种独立的渲染区域，其内部的元素不会对外部元素产生布局影响，反之亦然。BFC 的概念在解决页面布局题目时非常有效，尤其是清除浮动、处理外边距重叠等场景。
BFC 的主要特点是：
[*]块级元素垂直排列：BFC 内部的元素从顶端开始垂直地一个接一个地排列。每个元素的顶部紧接着前一个元素的底部。
[*]外边距重叠：属于同一个 BFC 的两个相邻块级元素之间的垂直外边距会发生重叠，这是 CSS 中一个常见的题目。
[*]隔离布局影响：BFC 区域内的布局不会受到外部元素的影响，这使得它在某些情况下成为解决布局题目的有效工具。
[*]清除浮动：BFC 可以包罗浮动元素，从而避免浮动元素的影响。例如，通过触发 BFC，可以避免父元素高度塌陷的题目。
1.1.1 BFC 的触发条件
https://i-blog.csdnimg.cn/direct/d957fdc1e9ab4ca0a6f3a58b5e5807f7.png#pic_right
要形成 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）
https://i-blog.csdnimg.cn/direct/76e332e179a34356ae450b0ecc072f6a.png#pic_right
IFC（Inline Formatting Context）即内联格式化上下文。它是行内元素及其盒模型（Box Model）到场布局的渲染区域。在 IFC 中，元素会按照行内元素的特性举行布局，形成多个行框（line box）。行框的高度是由该行内包罗的元素的高度决定的。
IFC 的一些关键特性：
[*]行内元素的高度：IFC 中行框的高度由行内元素的现实内容高度决定，而不是通过垂直方向的 padding 或 margin 来影响。
[*]浮动的干扰：在 IFC 中，如果有浮动元素存在，那么行框会由于浮动元素而受到影响，行框会围绕浮动元素排列。
通常，IFC 主要用于处理文本内容及其在页面中的排布，特殊是在有复杂排版需求时，比如图文混排的场景。
1.3 自顺应格式化上下文（FFC）
https://i-blog.csdnimg.cn/direct/fd8924de73ee47b2a2fc55ef746858b0.png#pic_right
FFC（Flex Formatting Context）即自顺应格式化上下文，是 CSS Flexbox 布局的根本。设置 display 属性为 flex 或 inline-flex 的元素，会创建一个 Flex 容器（flex container），该容器内部的所有子元素被称为伸缩项目（flex items）。
Flexbox 是一种一维的布局模型，这意味着它专注于在一个方向上对元素举行布局，可以是水平的（行）也可以是垂直的（列）。
1.3.1 FFC 的特点
https://i-blog.csdnimg.cn/direct/ec1082447eb9409696744f0613b9e723.png#pic_right
[*]弹性布局：FFC 可以根据容器大小动态调解伸缩项目的大小和排列方式，得当用来创建相应式布局。
[*]空间分配：FFC 可以机动地分配剩余空间，通过属性如 justify-content、align-items 等控制子元素的对齐方式。
[*]方向控制：通过 flex-direction 属性，可以控制伸缩项目的排列方向（水平或垂直）。
FFC 的强大之处在于其机动性，它非常得当现代 Web 开发中的相应式布局需求，特殊是当页面需要根据视口宽度举行动态调解时。
1.4 网格布局格式化上下文（GFC）
https://i-blog.csdnimg.cn/direct/cbd5cf4f4f964a2e968fb9092e48dc10.png#pic_right
GFC（Grid Formatting Context）即网格布局格式化上下文，是 CSS Grid 布局的根本。通过将元素的 display 属性设置为 grid 或 inline-grid，该元素会得到一个独立的网格容器（grid container），可以在其中定义网格的行和列，以及每个网格项目（grid item）的布局位置。
GFC 提供了一种二维的布局方式，与 FFC 不同，它可以同时处理水平和垂直方向的布局，使得复杂的页面布局变得更加简洁和直观。
1.4.1 GFC 的特点
https://i-blog.csdnimg.cn/direct/15687bd4c40045d6a2ffbff838fca38d.png#pic_right
[*]二维布局：GFC 可以在水平和垂直两个方向上同时定义布局，这使得它非常得当复杂的页面结构，比如数据表格和仪表板等。
[*]自动排列：网格布局的一个重要特性是可以自动排列网格项目，通过 grid-template-columns 和 grid-template-rows 来定义行列的大小。
与 FFC 相比，GFC 的主要上风在于其二维的布局能力，而 FFC 更得当处理一维的弹性布局需求。
1.5 FFC 和 GFC 的区别
https://i-blog.csdnimg.cn/direct/4fe135c306e742caab6e9747e94a1640.png#pic_right
FFC 和 GFC 在使用场景和特性上有明显差异：
[*]维度：FFC 实用于一维布局（水平或垂直），而 GFC 是二维布局（同时控制行和列）。
[*]使用场景：FFC 更加机动，得当相应式布局和弹性元素排列；GFC 则更得当复杂的页面结构，需要在两个方向上同时举行布局的情况。
2 BFC 的形成条件
https://i-blog.csdnimg.cn/direct/a38c6cb0149f4557bb6ccb4774597903.png#pic_right
如前文提到，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 的特性与规则
https://i-blog.csdnimg.cn/direct/23baf47e5d1a4cafb63e00abbee47059.png#pic_right
BFC 有着一些独特的布局规则，这些规则决定了在 BFC 内部的元素如何排列与相互作用。
3.1 垂直排列规则
https://i-blog.csdnimg.cn/direct/54a4e27dc83f4d2f923357c1ca507bbe.png#pic_right
在 BFC 中，块级盒子会从顶部开始垂直地一个接一个地排列，这意味着每个盒子的顶部会紧接着前一个盒子的底部，形成天然的垂直堆叠序次。不同于内联元素，块级元素的排列方式更为直观。
3.2 外边距折叠（Margin Collapsing）
https://i-blog.csdnimg.cn/direct/8b3fa43b18784fadb8ed93fcccc3de03.png#pic_right
在同一个 BFC 中，相邻块级元素的垂直外边距会发生折叠。也就是说，如果两个相邻元素的外边距分别是 margin-top: 20px 和 margin-bottom: 30px，那么它们之间的现实距离是较大的谁人值，即 30px，而不是两者的和。
这种外边距折叠的机制在很多场景下会带来困扰，特殊是在处理多个相邻元素的布局时。通过触发 BFC，我们可以避免这种外边距的重叠。
3.3 浮动元素与 BFC 的关系
https://i-blog.csdnimg.cn/direct/d798cf11a87742b1bacdb221c57be0c9.png#pic_right
BFC 的区域不会与浮动盒子重叠。在 BFC 中，盒子会避开浮动元素的区域，而紧贴浮动元素的边缘。这意味着，如果一个元素触发了 BFC，那么它内部的内容不会由于外部的浮动元素而被覆盖，而是会绕开浮动元素。
这一特性使得 BFC 成为处理浮动布局的重要工具。例如，当我们使用浮动布局时，如果父元素没有包罗浮动元素的高度，可能会导致布局错乱。通过使父元素触发 BFC，可以自动包罗浮动元素，从而解决高度塌陷的题目。
3.4 高度盘算与包罗浮动
https://i-blog.csdnimg.cn/direct/223e35f1ed5d45bf8d30bee905198c10.png#pic_right
在盘算 BFC 的高度时，BFC 会包罗其内部所有元素的高度，包括浮动元素。这也是 BFC 解决高度塌陷题目的根本原因之一。通常情况下，如果父元素内部的所有子元素都是浮动的，父元素的高度会变为 0，但如果父元素形成了 BFC，那么它会正常盘算包罗浮动子元素的高度。
4 BFC 的主要用途
https://i-blog.csdnimg.cn/direct/4cc77f910dba4730be441dd0d40d75df.png#pic_right
BFC 在现实开发中的用途非常广泛，尤其是在处理一些复杂布局题目时，BFC 提供了一种简洁高效的解决方案。
4.1 清除浮动影响
https://i-blog.csdnimg.cn/direct/99c720231e1846afaba1e89f66809421.png#pic_right
清除浮动是 BFC 最常见的应用场景之一。通常情况下，使用浮动布局的元素会脱离文档流，从而导致父元素高度塌陷。通过使父元素形成 BFC，可以自动包罗所有浮动子元素，从而避免高度塌陷。
例如：
.container {
overflow: hidden;
}
通过设置 overflow: hidden，父元素 .container 会形成一个 BFC，从而包罗所有的浮动子元素，解决高度塌陷题目。
4.2 处理外边距重叠
https://i-blog.csdnimg.cn/direct/9b0f3b0aeb3b4363b395f719169023c1.png#pic_right
BFC 也可以用来解决相邻元素之间的外边距重叠题目。由于 BFC 的独立性，它可以防止相邻元素之间的外边距折叠，从而避免不须要的布局题目。
例如：
.element {
overflow: hidden;
margin-bottom: 20px;
}
通过触发 BFC，可以确保元素的外边距不会与相邻元素发生重叠。
4.3 实现自顺应布局
https://i-blog.csdnimg.cn/direct/7b62aa8548234645a49bcbc6cc682600.png#pic_right
BFC 还可以用于实现两栏、三栏等自顺应布局。通过使用浮动和 BFC，可以使页面元素根据容器的大小举行自顺应排列，得当相应式计划。
例如：
.left {
float: left;
width: 200px;
height: 300px;
background: red;
}
.right {
overflow: hidden;
height: 300px;
background: blue;
}
在这个例子中，左侧元素设置了浮动，右侧元素通过设置 overflow: hidden 形成 BFC，从而避免了与浮动元素的重叠，实现了左右布局的效果。
5 HTML 扩散举动与 BFC 形成
https://i-blog.csdnimg.cn/direct/18ec08f07a4640219e526cf08aa62a50.png#pic_right
在 CSS 中，HTML 和 body 元素的 overflow 属性之间存在一种扩散举动，这种举动会影响 BFC 的形成。
5.1 扩散的概念
https://i-blog.csdnimg.cn/direct/44fa32b9d11940ab92f201a0cc4d9c93.png#pic_right
HTML 元素的 overflow 属性的值会扩散给 body 元素，默认情况下，HTML 的 overflow 为 visible，如果不手动设置，body 的 overflow 也会是 visible。
5.1.1 情况分析
https://i-blog.csdnimg.cn/direct/4971a67da46d47cb9b14238ee325b22a.png#pic_right
[*] 情况 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 现实应用中的注意事项
https://i-blog.csdnimg.cn/direct/ced796ac8311443e83edd3d36296869e.png#pic_right
在现实开发中，理解 HTML 与 body 的扩散举动对于正确触发 BFC 至关重要，特殊是在需要确保某些容器形成独立渲染上下文时，必须同时为 HTML 和 body 设置合适的属性，以避免不测的题目。
小结
[*] https://i-blog.csdnimg.cn/direct/d573c5e9c5d240c6880c35edb2a4f363.png#pic_center
格式化上下文是 CSS 中一个非常核心的概念，通过理解和使用不同类型的格式化上下文，可以解决很多复杂的布局题目。BFC、IFC、FFC 和 GFC 各有各的用途和特点：
[*] BFC 用于块级布局，特殊得当解决浮动、外边距重叠等题目。
[*] IFC 用于内联元素布局，得当处理复杂的文本排版。
[*] FFC 提供了一种机动的一维布局方式，得当相应式计划和自顺应布局。
[*] GFC 提供了一种强大的二维布局方式，得当复杂的页面结构。
在实践中，了解这些格式化上下文的触发条件和特性，可以资助开发者更加有效地控制页面元素的排列和布局，从而创建出更加精美和复杂的网页界面。
https://img-blog.csdnimg.cn/direct/00d4fdeb7b0d4dbb99e88f325ef249d8.gif#pic_center
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]