只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。
边界叠加的问题
边办叠加是一个如果误解就会导致许多麻烦的CSS特性。请参考div元素内嵌套段落的简单示例：
<div id="box">
<p>This paragraph has a 20px margin.</p>
</div>
div 框设置了10像素边界，段落设置了20像素的边界：
#box{
margin:10px;
background-color:#d5d5d5;
}
p{
margin:20px;
background-color:#6699ff;
}
你会自然地认为产生的样式会像图1-1那样，在段落和div之间有20像素的距离，在div外边围绕着10像素的边界。
图1-1
但是，产生的样式实际上像图1-2。
图1-2
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这里发生了两个情况。首先，段落的20像素上边界和上边界与div的10像素边界叠加，形成一个单一的20像素垂直边界。其次，这些边界不是被DIV包围，而是突出到DIV的顶部和底部的外边。出现这种情况是由于具有块级子元素的元素计算其高度方式造成的。
如果元素没有垂直边框和填充，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是，有一个简单的解决方案。通过添加一个垂直边框或填充，空白边就不再叠了，而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。
为了让前面的示例看起来像图1-1这样，只需在div周围添加补白或边框：
#box{
margin:10px;
padding:1px;/*或者border:1px solid color;*/
background-color:#d5d5d5;
}
p{
margin:20px;
background-color:#6699ff;
}
边l界叠加的大多数问题可以通过添加透明边框或1px的补白来修复。
补充解决方案：
1.外层 padding
2.透明边框 border:1px solid transparent;
3.绝对定位 postion:absolute:
4.外层DIV overflow:hidden;
5.内层DIV 加float:left; display:inline;
6.外层DIV有时会用到zoom:1;
