两个或多个相邻的普通流中的盒子（父子元、兄弟元素）在垂直方向上的外边距会发生叠加
原理
相邻
没有被padding、border、clear和line box分隔开
- 创建了BFC的元素不会和它的子元素发生外边距叠加
- inline-block元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
两个/多个
- 单个元素不会存在外边距叠加的情况
- 相邻的兄弟元素clear
普通流
只要不是 float、absolutely positioned 和 root element 时就是 in flow
- 浮动元素不会与任何元素发生叠加，也包括它的子元素
- 绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
垂直方向
水平方向的外边距不存在叠加的情况
解决
相邻兄弟元素margin合并
设置块状格式化上下文元素（BFC）
父级和第一个/最后一个子元素的 margin 合并
margin-top
- 父元素设置为块状格式化上下文元素
- 父元素设置border-top值
- 父元素设置padding-top值
- 父元素和第一个子元素之间添加内联元素进行分隔
margin-bottom
- 父元素设置为块状格式化上下文元素
- 父元素设置border-bottom值
- 父元素设置padding-bottom值
- 父元素和最后一个子元素之间添加内联元素进行分隔
- 父元素设置height、min-height或max-height
空块级元素的margin合并
- 设置垂直方向的border
- 设置垂直方向的padding
- 里面添加内联元素（直接Space键空格是没用的）
- 设置height或者min-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>margin collapse</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
background-color: red;
overflow: hidden; /* creates a block formatting context */
}
p {
background-color: lightgreen;
margin: 10px 0;
}
.newBFC {
overflow: hidden; /* creates new block formatting context */
}
</style>
</head>
<body>
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<div class="newBFC">
<p>Sibling 3</p>
</div>
</div>
</body>
</html>
```
