html - 内部div浮出父div

Question

Example

为10px的每个sidebar-block设置了一个margin-bottom，它显示为内部div，即sidebar-block.body 从容器中流出。

我进行了研究和调试，但找不到原因，我唯一一次使用 float 是在主 #sidebar 本身。

HTML

<div id="sidebar">
    <div class="sidebar-block">
        <div class="sidebar-block title"><div class="text-with-margin">profile</div></div>
        <div class="sidebar-block body"></div>
    </div>
    <div class="sidebar-block">
            <div class="sidebar-block title"><div class="text-with-margin">forum activity</div> </div>
        <div class="sidebar-block body"></div>
    </div>
</div>

CSS

#sidebar {
    float: right;
    width: 268px;
    margin-top: 10px;
}

.sidebar-block {
    margin-bottom: 10px;
}

.sidebar-block.title {
    background-color: #2E392F;
    min-height: 47px;
    color: white;
    font-size: 1.2em;
}

.sidebar-block.body {
    overflow: hidden;
    background-color: white;
}

.text-with-margin {
    width: 100%;
    padding: 0.5em 0.5em 0.5em 0.5em;
    display: block;
}

Answer 1

已修复，这是因为我以某种方式使用了 .sidebar-block 标题和 .sidebar-block 主体，以便 .sidebar-block 的 css 会自动应用于它们，这不是我的本意，所以我重命名了 div。