CSS外边距叠加问题

最近在写CSS时发现自己对于外边距叠加问题理解的不是很清楚，在网上找好一些资料，总结于此。

边界叠加是指两个或多个盒子（可能相邻也可能嵌套）的相邻边界（期间没有任何非空内容、补白、边框）重合在一起而形成一个单一边界。

简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

而具体又有以下几种情况：

1.当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加

2.元素的顶边界与前面元素的底边界发生叠加

3.元素的顶边界与父元素的顶边界发生叠加

4.元素的顶边界与底边界发生叠加

5.空元素中已经叠加的边界与另一个空元素的边界发生叠加

只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

解决方案：

边l界叠加的大多数问题可以通过添加透明边框或1px的补白来修复。

1.外层padding

2.透明边框border:1pxsolidtransparent;

3.绝对定位postion:absolute:

4.外层DIVoverflow:hidden;

5.内层DIV　加float:left;display:inline;

6.外层DIV有时会用到zoom:1;