CSS外边距塌陷的总结

一.当两个元素为兄弟元素时：
.father {
width: 100px;
height: 100px;
background-color: aqua;
margin-bottom: 10px;
}
.son {
width: 50px;
height: 50px;
background-color: pink;
margin-top: 30px;
}
结果：只显示最大的外边距30px

二.当两个元素为父子元素时：

1.当父元素有border或padding：
.father {
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid #eee
}
.son {
width: 50px;
height: 50px;
background-color: pink;
margin-top: 30px;
margin-bottom: 5px;
}
子元素的外边距能正常显示，父子之间不出现外边距问题。
2.当父元素无border或padding（把父元素的padding或者border去掉，代码同1）：
结果：

会发现父盒子跟随子盒子一起有了一个上外边距，而此时如果给父元素一个margin-top（比子元素的小），结果也没变化。

注意：设定float和position=absolute（包括固定定位fixed，但是relative不可以）的元素不会产生外边距重叠行为（也就是父子元素都是标准流的时候会发生外边距塌陷的问题）
只要父元素和子元素任何一个元素设置了浮动或者绝对定位就不会发生外边距塌陷的问题