格式化上下文
网页的显示页面中，每一部分都是格式化上下文的一部分。在页面的渲染中，有着各种各样独立的区域，他们就像每个国家都有自己的制度，通过这些制度来确立国家的运行机制。最终由这些国家来组成我们多姿多彩的世界。
BFC（Block formatting contexts）
BFC又称「块格式化上下文」，我们能在各大面试试题中见到它。MDN中对它的解释有一句：「参与BFC的元素使用CSS框模型概述的规则，该模型定义了元素的边距、边框和填充如何与同一上下文中的其他块交互」。简而言之，BFC是一个独立的区域，它内部的元素都依照它的规则渲染，并且不会与BFC外部打交道。
所以我们能用BFC做什么呢？通常是以下几点：
清除元素内部的浮动效果
防止垂直的margin重叠
防止margin溢出
左边定宽，右边自适应布局（反之亦可）
那么哪些方式会生成BFC元素呢？以下：
浮动元素
float: left;/float: right;绝对定位的元素
position: absolute;/position: fixed;/position: sticky;display: inline-block;的元素table标签内每一格，或者
display: table-*;的元素overflow不为 visible 的元素display: flow-root或者display: flow-root list-item的元素contain: layout/content/strict的元素display: flex/inline-flex/grid/inline-grid的元素column-span: all的元素
IFC（Inline formatting contexts）
IFC又称「行内格式化上下文」。「其存在于其他格式上下文中，可以将其视为段落的上下文」。用法有以下几种：
内联元素水平居中
内联元素垂直居中
段落展示
其他
FFC（Flex formatting contexts）：
display: flex;的元素，我们常说的弹性布局GFC（GrideLayout formatting contexts）：
display: grid的元素，网格布局
引用
博客地址 北落师门
