1️⃣ 什么是 Margin 塌陷
【现象】
两个垂直方向相邻的块级盒子(兄弟或父子)之间的margin 会合并为其中的最大值，而不是两者相加。
【影响】
兄弟元素：上下margin合并为其中的最大值
父子元素：如果父元素没有padding 或 border，子元素的 margin-top会 透过 父元素与父元素的 margin-top合并
2️⃣ BFC（Block Formatting Context）是什么
【定义】
1、BFC 是一个独立渲染区域，创建BFC的元素 内部的布局规则与外部隔离
2、内部元素的margin 不会与 BFC外部 的 margin发生塌陷
3、BFC区域不会与浮动元素重叠，会包裹内部浮动
4、BFC的计算高度包含浮动子元素
3️⃣ 如何触发 BFC
| 触发属性 | 示例 |
|---|---|
overflow 非 visible |
overflow:hidden / auto / scroll |
display 特殊值 |
display: flow-root（推荐现代方案）、inline-block、table-cell |
| 浮动 | float: left/right |
| 定位 | position: absolute / fixed |
| 弹性/网格布局 | display: flex / grid |
4️⃣ 常见解决 Margin 塌陷的方法
| 方法 | 代码示例 | 原理 |
|---|---|---|
| 父元素创建 BFC | overflow:hidden; / display: flow-root; |
BFC 内外 margin 不会塌陷 |
| 父元素加 padding 或 border | padding-top:1px; / border-top:1px solid transparent; |
子元素的 margin-top 不会透过 padding/border |
| 浮动父元素 | float:left; |
浮动元素自动形成 BFC |
| flex/grid 布局 | display:flex; |
Flex 容器是 BFC |
| 伪元素清除 | ::before { content:""; display:table; } |
display:table 也创建 BFC |
5️⃣ BFC 除了解决 margin 塌陷还有什么作用？
1、包含内部浮动元素(清除浮动)
2、阻止文字环绕浮动
3、隔离外部布局，防止浮动\外边距影响