margin上下边距重叠的两种情况

很多初学者对HTML中margin的外边距初有了解，所了解的基本概念是margin是盒子模型的外边框，包括上右下左四个属性。而且两个盒子左右边框之间的距离为左右边距的叠加值，而两盒子上下的距离为二者上下margin值中最大的那一方的值。

但是还有一种情况是两盒子上下距离为二者上下margin值的和，这种情况为设置float浮动后，上下边框叠加不遵守原规则。

举个例子：

如上图所示，是一个外边框宽为70px, 高为200px的边框。其中有四个小的边框，每个小边框设置其margin-bottom为10px。现在并未设置float浮动。

对名为right的边框再设置其margin-top为10px，效果和上图一样没有变化，原因为margin值最大为10px, 取最大值后没有变化。那么把right边框的margin-top改为20px，效果如下图所示：

可见left 和 right之间的间距变成了20px，最大值，也就是margin-top的值。

我们还原设置，即把right的margin-top的值删除，还是只保留对四个框margin-bottom的设置，然后对四个小框设置其float属性，效果还是如最初所示，如下图：

但是，这次再对名为right的边框设置其margin-top为10px后，效果变化如图所示：

这时left和right之间的距离为left 的margin-bottom和right 的margin-top的相加，此时不遵循margin叠加规则。