float元素为什么不能覆盖兄弟元素的margin部分？

Question

为块级元素设置样式为float:left，其块级兄弟元素有样式为margin-top:30px，此时浮动元素覆盖到其兄弟元素上方，但是浮动元素不能覆盖到兄弟元素的margin部分。

浏览器截图如下：

从图中可以看出，红色的浮动元素没有覆盖到兄弟元素div#wrap的margin部分。

各元素的样式如下：

#box {
    width: 200px; 
    height: 200px;
    padding-top: 20px;
    border-bottom: 10px solid;
    margin-bottom: 20px;
    background-color: red;
    float: left;
}

#wrap {
    width: 100px;
    height: 100px;
    margin-top: 30px;
    background-color: yellow;
}

Answer 1

这个是margin重叠（或者叫叠加）导致的。
'#wrap'设置了margin-top: 30px;wrap和body的margin-top发生了叠加。
你可以给body设置border或者padding,再看下效果，完全不同。
如下：

Answer 2

可以覆盖到兄弟元素的margin部分(body、html其它代码的影响)，先初始化整体代码，或者#wrap部分进行float，也能实现你想要的效果。