共计 1626 个字符，预计需要花费 5 分钟才能阅读完成。
前言
在标准文档流中，如果两个竖直方向的 margin 直接接触，中间没有 border、padding 或者 content 隔开就会发生 margin 合并、或者 margin 塌陷现象。
而发生两个竖直方向的 margin 直接接触通常有两种情况：
- 父子关系的块级元素。（margin 塌陷）
- 兄弟关系的块级元素。（margin 合并）
margin 塌陷
margin 塌陷现象通常出现在嵌套关系（父子关系）的块级元素。父元素与子元素的 margin-top 直接接触，这时如果给子元素设置一个 margin-top，会发现父元素也跟着下来了。
代码如下：
<body style="background: grey;">
<div style="height: 500px;background: blue;">
<div style="height: 200px;background: green;margin-top:50px;"></div>
</div>
</body>效果如下:
margin 合并
margin 合并现象通常出现在兄弟关系的块级元素。两个兄弟元素的 margin-bottom 与 margin-top 直接接触，这时候会取较大的 margin。
代码如下：
<body style="background: grey;">
<div style="height: 500px;background: blue;">
<div style="height: 200px;background: green;margin-bottom: 10px;"></div>
<div style="height: 200px;background: green;margin-top:50px;"></div>
</div>
</body>效果如下：
解决方案
关于 margin 塌陷及 margin 合并的解决方案大概可以分为两个方向：
- 避免竖直方向的的 margin 直接接触。简单来说就是用 border、padding 或者 content 将两个直接接触的 margin 隔开。
- 让其脱离标准文档流，而脱离文档流的方法就是触发 BFC。
具体解决方案在附录。
BFC
BFC 全称为 Block Formatting Context（块级格式化上下文）。简单来说就是，提供了一个环境，这个环境中的元素不会影响到外面的布局。
触发 BFC 的方法
- float 属性不为 none
- position 属性为 absolute 或 fixed
- display 为 inline-block、table-cell、table-cation、flex、inline-flex
- overflow 不为 visible
附录
Margin 塌陷解决方案
避免竖直方向的 margin 直接接触
-
用 border 隔开
-
用 padding 隔开
-
用 content 隔开
content
触发 BFC
<body style="background: grey;">
<div style="height: 500px;background: blue;overflow: hidden;">
<div style="height: 200px;background: green;margin-top: 50px;"></div>
</div>
</body>margin 合并解决方案
避免竖直方向的 margin 直接接触
-
用 border 隔开
-
用 padding 隔开
-
用 content 隔开
content
触发 BFC
<body style="background: grey;">
<div style="height: 500px;background: blue;">
<div style="height: 200px;background: green;margin-bottom: 10px;"></div>
<div style="overflow: hidden;">
<div style="height: 200px;background: green;margin-top: 50px;"></div>
</div>
</div>
</body>正文完
发表至： HTML
2023-04-09
