Margin塌陷问题

一、当父元素中第一个子元素设置margin-top时，目的是设置子元素与父元素顶部的距离，实际上却实现的是父元素和上一个元素的顶部距离，这种现象称之为margin塌陷。

解决方案：

1、在父元素中书写：overflow：hidden；

2、使用父元素的padding-top替代子元素的margin-top;

3、为父元素添加透明边框border:solid 1px transparent

二、兄弟元素之间的margin塌陷问题：

上方元素设置 margin-bottom，下方设置margin-top,最终两个元素之间的距离不等于两个margin之和。

解决方案：

无需解决，当需要设置两个元素之间的垂直距离时，为其中的一个元素设置margin即可。

三、元素自身的塌陷问题

当父元素的高度设置为auto或不写，同时内部子元素设置了浮动属性时，父元素的高度会发生自身塌陷。

解决方案：

1、内部子元素不使用浮动属性，可以使用display将子元素设置为内联块；

2、在父元素上添加overflow：hidden，