今天遇到设置margin的问题，就是在设置垂直方向上相邻的两个块级元素之间，它们之间的外边距（margin）可能会发生一种特殊的合并现象。
用一个简单的示例解释下。
html+css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.parent{
width: 300px;
height: 300px;
background-color: aqua;
}
.child1{
width: 100px;
height: 100px;
background-color: blueviolet;
margin-top: 20px;/* 子元素的上外边距 */
}
.child2{
width: 100px;
height: 100px;
background-color: gray
}
/* 正常情况下，你会期望在.parent和.child之间看到20px的间距，
但由于margin塌陷，这个间距可能看起来比预期的要小或根本不存在，
特别是如果.parent的上方没有其他元素或边框/内边距来阻止塌陷的话。
*/
</style>
<body>
<div class="parent">
<div class="child child1">Child 1</div>
<div class="child child2">Child 2</div>
</div>
</body>
</html>运行效果如下：
怎么解决margin塌陷呢，第一种方式给父元素加上边框
border: 1px solid transparent; /* 阻止margin塌陷 */但是这种方式会占内容盒子的大小
所以比较好的解决方式就是，给父元素加上overflow
overflow: hidden; /* 触发BFC，避免子元素margin塌陷 */这样就完美解决了。