携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情
前言
关于格式化上下文的概念，其中有几种类型的类型，包括块格式设置上下文、内联格式设置上下文和 弹性格式设置上下文(引用MDN)。
BFC是什么
BFC全称Block Formatting Contexts，是格式化上下文中的块级格式化上下文，它是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响，它属于定位方案的普通流。
怎样实现BFC
<html>元素并不是唯一能够创建块格式设置上下文的元素。任何块级元素都可以通过应用某些CSS属性来创建BFC。
包含以下属性可以触发BFC：
- 浮动
float: right;
float: left;
- 绝对定位
position: absolute;
position: fixed;
- display
display: flex;
display: grid;
display: inline-block;
display: table-cells或table-*;
display: table-caption;
display: flow-root;
- overflow
overflow: hidden;
overflow: auto;
overflow: scroll;
- 包含：
contain： layout或content：strict的元素 - 多列布局
- column-span设置为all的元素
BFC有什么用处
新的 BFC 的行为与最外层的文档非常相似，因为它成为主布局内的迷你布局。BFC 包含其中的所有内容，浮动 和清除 仅适用于同一格式设置上下文中的项目，而边距仅在相同格式设置上下文中的元素之间折叠(引用MDN)。意思是：
-
清除浮动：通过改变包含浮动子元素的父盒子的属性值，触发BFC，以此来包含子元素的浮动盒子。 -
阻止元素被浮动元素覆盖：一个正常文档流的块级元素可能被一个浮动元素覆盖，挤占正常文档流，因此可以设置一个元素的float、display、position或者overflow值等方式触发BFC，以阻止被浮动盒子覆盖。 -
阻止相邻元素的margin合并：属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。
内联格式化上下文
内联格式设置上下文存在于其他格式设置上下文中，可以被视为段落的上下文。该段落创建一个内联格式设置上下文，其中对文本使用<strong>、<a> 或 <span> 元素等内容。
盒模型(可参考我往期 老生常谈-CSS盒模型)不完全适用于参与内联格式设置上下文的项。在水平书写模式行中，水平填充、边框和边距将应用于元素，并将文本左右推开。但是，不会应用元素上方和下方的边距。将应用垂直填充和边框，但可能会重叠上方和下方的内容，因为在内联格式设置上下文中，线条框不会被填充和边框推开。
最后
一起学习，欢迎指正。
