为什么这个浮动的 div 被其兄弟的边距拉下？

Question

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

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

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

有没有办法在不将第二个孩子嵌套在另一个 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

Answer 2

给.content添加一个不可见的空格字符

<div id="content">
    &nbsp; <!-- Add this -->
    <div id="sidebar">sidebar</div>
    <div id="messages">
        a message
    </div>
</div>

这是你想要的吗？

为什么有效？

在此处查看链接：https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

父母和第一个/最后一个孩子 如果没有border、padding、inline 内容，或间隙，将块的边缘顶部与 其第一个子块的 margin-top，或者没有边框、填充、内联 内容、高度、最小高度或最大高度来分隔 一个块的 margin-bottom 及其最后一个孩子的 margin-bottom， 然后这些边距崩溃。折叠的边距最终超出 父母。

我使用“内联内容”来“修复”问题，实际上您可以使用以下方法之一修复它：

• 将border: 1px solid 添加到.content。
• 将padding: 1px 添加到.content。
• 添加内联内容（例如空格字符）
• 使用clear:both div