北落师门

##格式化上下文

格式化上下文（Formatting Context）是Web页面的可视化CSS渲染的根据，细分为IFC、BFC、FFC和GFC。关键在于能用它们做什么。

网页的显示页面中，每一部分都是格式化上下文的一部分。在页面的渲染中，有着各种各样独立的区域，他们就像每个国家都有自己的制度，通过这些制度来确立国家的运行机制。最终由这些国家来组成我们多姿多彩的世界。

BFC（Block formatting contexts）

BFC又称「块格式化上下文」，我们能在各大面试试题中见到它。MDN中对它的解释有一句：「参与BFC的元素使用CSS框模型概述的规则，该模型定义了元素的边距、边框和填充如何与同一上下文中的其他块交互」。简而言之，BFC是一个独立的区域，它内部的元素都依照它的规则渲染，并且不会与BFC外部打交道。

所以我们能用BFC做什么呢？通常是以下几点：

1. 清除元素内部的浮动效果
2. 防止垂直的margin重叠
3. 防止margin溢出
4. 左边定宽，右边自适应布局（反之亦可）

那么哪些方式会生成BFC元素呢？以下：

1. 浮动元素 float: left;/float: right;
2. 绝对定位的元素 position: absolute;/position: fixed;/position: sticky;
3. display: inline-block;的元素
4. table标签内每一格，或者display: table-*;的元素
5. overflow不为 visible 的元素
6. display: flow-root 或者 display: flow-root list-item 的元素
7. contain: layout/content/strict的元素
8. display: flex/inline-flex/grid/inline-grid 的元素
9. column-span: all 的元素

IFC（Inline formatting contexts）

IFC又称「行内格式化上下文」。「其存在于其他格式上下文中，可以将其视为段落的上下文」。用法有以下几种：

1. 内联元素水平居中
2. 内联元素垂直居中
3. 段落展示

其他

• FFC（Flex formatting contexts）：display: flex;的元素，我们常说的弹性布局
• GFC（GrideLayout formatting contexts）：display: grid的元素，网格布局

引用

格式化上下文简介