html - 为什么这个 float 的 div 被其 sibling 的边距拉低了？

Question

我有一个包含两个子 div 的容器 div。

第一个 child 向右浮动。第二个 child 有上边距。

由于某种原因，第二个子元素的边距拉低了父容器，导致 float 元素也被拉低。

有没有办法在不将第二个 child 嵌套在另一个 div 中以防止下拉的情况下完成这项工作？

元素是动态的，所以我不能只向侧边栏添加一个负边距来抵消另一个子元素的边距。

html

<div id="content">
    <div id="sidebar">sidebar</div>
    <div id="messages">
        a message
    </div>
</div>

CSS

body {
    background-color : red;
}

#content {
    background-color: blue;
}

#sidebar {
    background-color: yellow;
    float: right;
}

#messages {
    background-color: green;
    margin-top : 20px;
}

Fiddle

Answer 1

给父div一个overflow:hidden，即.content