今天看到一篇文章，说到margin的塌陷的问题，并提供了好几个例子。
自己之前还没怎么遇到过这个问题，正好来研究一下。
XML/HTML Code复制内容到剪贴板
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
css样式一，使用margin塌陷：
CSS Code复制内容到剪贴板
.box1, .box2, .box3 {
width: 200px;
}
.box1{
margin-bottom: -80px;
height:100px;
background: blue;
}
.box2 {
margin-bottom:-40px;
height:60px;
background: #ffff00;
}
.box3{
height:20px;
background: #ff0000;
}
效果：
css样式二，也是使用的margin塌陷，不过做出来的是弧形的彩虹：
CSS Code复制内容到剪贴板
.box1{
width: 400px;
height: 200px;
overflow: hidden;
}
.box1::before{
float: left;
display: block;
height: 400px;
width:400px;
border-radius: 100%;
border: solid 10px blue;
box-sizing: border-box;
content: "";
}
.box1::after{
