概念：
中文翻译为格式化上下文，是一块独立的渲染环境，该环境的内部元素布局不影响外部，外部元素的布局不影响内部
如何形成：
- 根元素
- 浮动元素
- 绝对定位元素
- 行级块元素
- overflow不为visible的元素
规则
1.属于同一个BFC的两个相邻Box的上下margin会发生重叠 ；
image.png
image.png
解决方案：不让这两个元素在同一个BFC中
image.png
2.计算BFC的高度时，浮动元素也参与计算
例子：BFC只有浮动元素，父级元素会发生高度塌陷
解决方案：给父级元素的overflow为hidden
避免被浮动元素遮挡
3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
-
BFC的区域不会与float重叠；
例子：
image.png
解决方案：利用规则4，让红色区域独立成为一个BFC
