外边距合并及塌陷

垂直外边距合并

定义：

垂直外边距合并指的是，当两个不浮动的元素，它们的垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

解决方法：

给一边外边距设大至达到设计间距,一般设置margin-top

margin-top塌陷问题

定义

在两个不浮动的盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败

解决方法：

1:给父元素设padding分隔元素，而不是给子元素设margin.

2:解决外边距塌陷和浮动高度塌陷专用CSS代码,
使用方式:在塌陷父元素的class名内加上命名 clearfix 即可，代码如下：

.clearfix:after,.clearfix:before{ content: "";display: table;}.clearfix:after{ clear:both;}.clearfix{zoom:1;}