忽略的问题——margin重叠

1.margin同向重叠。

问题描述：

first盒子和wrapper大盒子的margin都是10px，然而，first的上边界与wrapper的上边界重叠，third的下边界与wrapper下边界重叠，而不是相距10px。

解决方法：

a.给wrapper设置border。

b.给wrapper设置padding。

c.引用闭合浮动的方式，在父元素wrapper中设置overflow：hidden（针对IE还需要加上zoom：1）.

                d.给wrapper设置position：absolute。

                e.给内层div们设置float属性（记得最后闭合浮动或者清除浮动）。

2.margin异向重叠

问题描述：依旧如上图，first和second盒子都有margin：10px，但是显示出来两个盒子的距离却不是20px，而仍然是10px。也就是说此时上面盒子的margin-bottom和下面盒子的margin-top产生了重叠，这个距离由二者中数值较大者决定。

我认为异向重叠是一个优点，一般情况下，我并不想去改变它。等遇到需要解决的时候再来补充吧。