前言
大家好，我是HoMeTown，今天想聊一聊CSS中的BFC，很多朋友应该都听过这个名词，搞懂BFC可以让我们理解CSS中一些很诡异的地方，话不多说，直奔主题！
什么是BFC
BFC是什么？引用MDN的一段介绍：
块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
大白话讲，我理解BFC其实就是CSS中的块级作用域，包含上下文元素中的所有子元素，但不包括内创建了新的BFC的子元素的内部元素，也就是 A -> B -> C 但是 A !-> C，换句话讲，一个元素不可能存在于两个BFC中，因为如果一个元素存在于两个不同的BFC，那么这个元素就能和这两个BFC中的子元素发生作用，那就违法了BFC的初衷：隔离。
BFC的渲染规则
BFC中有特定的渲染规则，如下：
- 同一个BFC中两个相邻的元素的
margin重叠问题 - BFC在计算高度是，即使浮动的元素也会参与高度计算
- BFC的区域不会与float的元素区域重叠
- 每个元素的左外边距与包含块的左边界相接触，即使浮动也如此
- 内部的盒子会一在垂直方向上一个个放置
BFC的触发条件
- 根元素（HTML标签）
- float
- overflow != visible
- display =
inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid - postion =
fixed/absolute
BFC的作用
防止相邻元素的margin重叠
上面提到过，同一个BFC的两个相邻元素的上下margin会发生重叠，举个
