BFC与IFC

格式化上下文

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

多种格式化上下文组成页面的渲染模式

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的元素，网格布局

---

引用

格式化上下文简介

---

博客地址 北落师门