标准文档流
在标准文档流中，水平方向没有margin塌陷问题，在垂直方向分两种情况：
- 同级元素的盒子
- 父子元素的盒子
同级元素（兄弟元素）：
在垂直方向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部
解决方法：给上面的盒子加个margin-bottom（这个距离等于两个盒子之间的距离）或者给下面的盒子加个margin-top（这个距离等于两个盒子之间的距离）
父子元素
让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开；一般情况下，父子盒模型之间的距离就不要用子元素的margin去设置，而是用父元素的padding挤出来。
浮动流
当子元素设置浮动以后，子元素会完全脱离文档流，
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
解决方法:
第一种：给父元素添加overflow: hidden;
第二种：给父元素添加
.father::after{
/*添加一个内容*/
content: '';
/*清除两侧的浮动*/
clear: both;
/*转换为一个块元素*/
display: block;
}
第三种：
给父元素末尾添加一个空元素，并设置成清除浮动
<div style="clear:both;"></div>
