margin塌陷

1、元素自身塌陷

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

解决方法：
1、内部子元素不使用浮动属性，可以使用display将子元素设置为内联块；
2、在父元素上添加overflow：hidden。

2、同级元素塌陷

两个同级元素，垂直排列。上面的盒子给了margin-bottom，下面的盒子给了margin-top，这两个边距会重叠，会按照两者中较大的值来计算。

解决办法：
只给一个元素设置外边距。

3、父子元素塌陷

两个父子元素，内部的子盒子给了margin-top，父元素也会受到影响，同时产生上边距，也就是父子重合（粘连）。

解决方法：
1、在父元素中书写：overflow：hidden；
2、使用父元素的padding-top替代子元素的margin-top;
3、为父元素添加透明边框border:solid 1px transparent。