<div style="background-color:#ccc; height:100px; width:400px;">
<div style="margin-top:30px; background-color:#900; height:50px;">margin-top:30px; background-color:#900; height:50px;</div>
</div>

你以为会是这样：

结果确是这样：

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
常规流中两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。
但是边界的重叠也有例外情况：

• 水平边界永远不会重叠。
• 浮动盒子、绝对定位盒子、内联块盒子、根盒子的边界永不重叠。
• overflow属性不等于visible的元素与它的非浮动子元素之间边界不发生重叠。

常规流中两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。

如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。