Open
Description
高度塌陷
我们知道，如果一个块级元素没有设置固定的高度，那么它的高度会被高度最大的子元素撑起，如下：
在容器中有 box1 和 box2 两个元素，容器的高度被 box1 撑起
<div style="background-color: aqua;display:flex">
<div style="height:100px;width:100px;background-color: red;line-height:100px;text-align:center;color:white">box1</div>
<div style="height:50px;width:150px;background-color: blue;line-height:50px;text-align:center;color:white">box2</div>
</div>
如果给 box1 添加浮动、定位等，使其脱离了正常的文档流，即产生了高度塌陷
<div style="background-color: aqua;">
<div style="height:100px;width:100px;background-color: red;line-height:100px;text-align:center;color:white;float: left;">box1</div>
<div style="height:50px;width:150px;background-color: blue;line-height:50px;text-align:center;color:white">box2</div>
</div><br>
外边距塌陷
外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。
兄弟元素
<div style="margin-bottom: 5px; background-color: rgb(255, 147, 147)">
一寸光阴一寸金
</div>
<div style="margin-top: 30px; background-color: rgb(159, 159, 255)">
寸金难买寸光阴
</div>
<div style="margin-bottom: 5px; background-color: rgb(255, 147, 147)">
一寸光阴一寸金
</div>
<div style="margin-top: 30px; background-color: rgb(159, 159, 255)">
寸金难买寸光阴
</div>
可以看到在有相邻 margin-bottom 和 margin-top 时，他们只会保留边距大的一个，而不是将其累加
父子元素
<div style="background-color: rgb(224,224,224);height:300px;display:flow-root">
<div style="background-color: rgb(122,122,222);width:200px;height:200px;">
<div style="background-color: rgb(122,22,122);width:100px;height:100px;margin-top: 20px;"></div>
</div>
</div>
这种现象我们应该经常会遇到，无论是给父元素还是子元素边距，他们都会有边距。
以上情形都可以通过 BFC 解决，那么什么是 BFC ？
BFC（块级格式化上下文）
BFC(Block formatting context)直译为“块级格式化上下文”。BFC 它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。
简单的来说 BFC是一个与世隔绝的盒子，其内部元素对外部布局不产生影响，并且 BFC 里的脱离文本流的元素会按照正常流进行布局。
那么如何创建 BFC
- over-flow：除visible以外的值
- 浮动
- position：除static和relative以外的值
- display：除grid、inline-grid和inline以外的值
总结
合理的运用 BFC 能解决很多的布局问题，如：浮动未清除的影响，外边距重叠，文字的环绕等。