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

将overflow:hidden提供给父div，即.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

父母和第一个/最后一个孩子如果没有边框，填充，内联内容或间隙将块的边距顶部与 margin-top的第一个子块，或没有边框，填充，内联内容，高度，最小高度或最大高度来分隔在最后一个孩子的边缘底部的块的底部 - 那些利润就会崩溃。倒塌的保证金最终在外面父节点。

我使用了＆＃34;内联内容＆＃34;到＆＃34;修复＆＃34;问题，实际上您可以使用以下方法之一来修复它：

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

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

2 个答案:

为什么会这样？