Box（块级）和普通流中的格式化上下文（BFC、IFC、FFC和GFC）详解
2024-01-27 20:24:50
HTML中盒子的类型与Box的关系
在HTML中，元素的类型和display属性，决定了这个Box的类型。Box类型主要分为块级（block-level）元素和内联元素（inline element）。
-
块级元素 ：块级元素通常会独占一行，其宽度和高度由其内容决定。块级元素的例子有
<div>、<h1>和<p>。 -
内联元素 ：内联元素通常不会独占一行，其宽度和高度由其内容决定。内联元素的例子有
<span>、<a>和<img>。
格式化上下文（Formatting Context）
格式化上下文（Formatting Context）是一个决定如何渲染文档的容器。每个格式化上下文都是一个独立的渲染单元，其中的元素的位置和大小由该格式化上下文的规则决定。
最常见的格式化上下文是根元素（root element） 。根元素是文档的顶层元素，通常是<html>元素。根元素的格式化上下文包含了整个文档。
BFC（Block Formatting Context）
块级格式化上下文（Block Formatting Context）是块级元素创建的格式化上下文。BFC中的元素按照从上到下的顺序排列，并且元素之间不会有重叠。BFC的宽度由其包含的块级元素的宽度决定，高度由其包含的块级元素的高度决定。
IFC（Inline Formatting Context）
内联格式化上下文（Inline Formatting Context）是内联元素创建的格式化上下文。IFC中的元素按照从左到右的顺序排列，并且元素之间可以有重叠。IFC的宽度由其包含的内联元素的宽度决定，高度由其包含的内联元素的高度决定。
FFC（Floated Formatting Context）
浮动格式化上下文（Floated Formatting Context）是浮动元素创建的格式化上下文。FFC中的元素按照从左到右的顺序排列，并且元素之间可以有重叠。FFC的宽度由其包含的浮动元素的宽度决定，高度由其包含的浮动元素的高度决定。
GFC（Grid Formatting Context）
网格格式化上下文（Grid Formatting Context）是网格元素创建的格式化上下文。GFC中的元素按照网格的布局规则排列，并且元素之间不会有重叠。GFC的宽度和高度由网格的布局规则决定。
常见布局技巧
了解了BFC、IFC、FFC和GFC之后，我们可以使用它们来实现一些常见的布局技巧。
-
清除浮动 ：使用
clear属性可以清除浮动元素的影响，使元素不会在浮动元素的旁边或下面显示。 -
溢出隐藏 ：使用
overflow: hidden属性可以隐藏超出父元素范围的内容。 -
创建多列布局 ：可以使用BFC和浮动元素来创建多列布局。
-
创建网格布局 ：可以使用GFC来创建网格布局。
更多信息
有关格式化上下文的更多信息，可以参考以下资源：
总结
格式化上下文（formatting context）是CSS中布局的重要概念。理解了BFC、IFC、FFC和GFC之后，我们可以更好地控制元素的布局，并实现更多复杂的布局效果。
