margin塌陷问题

margin塌陷问题是发生在垂直方向上的

垂直方向上外边距相撞时，取较大值 注意：浮动元素的外边距不合并

1、兄弟元素

上盒子设置了margin-bottom
下盒子设置了margin-top
则两个盒子之间的距离取决于两个值中较大的一方

2、父子元素

不论是父元素还是子元素或是父子元素都设置margin-top
子元素相对于父元素的位置都不变
父元素和子元素一起下落
下落的值为两个值中的较大值

解决方法：

• ①父元素设置overflow:hidden;

• ②父元素或者子元素设置float

• ③父元素设置border:1px solid
  transparent;

• ④父元素设置padding-top:1px;