Question

更多细节：我有两个div，一个float:left，另一个float:right，父级是clear:both，以便我可以在页面上向下订购容器父级。具体的CSS在这里：

#content {
    margin-left:auto;
    margin-right:auto;
    width: 750px;
    margin-top:50px;
    position:relative;
}
.container-div {
    padding-top:7px;
    padding-bottom:10px;
    clear:both;
    background-color:#b0c4de;
}
.left-side {
    float:left;
}
.right-side
    float:right;
}

问题是父级的background-color只覆盖了容器顶部的一小部分，而chrome检查器显示内容显然只是该部分。是什么赋予了？如何让div看到浮动的div作为内容？

Answer 1

您的DOM结构或多或少看起来像这样

<div class="container-div">
    <div class="left-side"></div>
    <div class="right-side"></div>
</div>

带有类容器的父div的宽度为100％。现在你试图在父div中浮动两个子div而不给它们任何宽度，默认情况下，子div将占用100％的宽度。所以你必须将子div的宽度定义为50％，然后只有你的浮点数才有效。

现在尝试以下代码

.clear{clear:both}

.container-div {
    padding-top:7px;
    padding-bottom:10px;
    background-color:#b0c4de;
}
.left-side {
    float:left;
    width=50%;
}
.right-side
    float:right;
    width=50%;
}

你的DOM应该是这样的

<div class="container-div">
        <div class="left-side">your left divs content</div>
        <div class="right-side">your right divs content</div>
        <div class="clear"></div>
</div>

现在您将看到一切都在正确的位置，并且镀铬检查员将完美地显示它。

Answer 2

尝试在父

上添加overflow: auto

Answer 3

父.container-div应设置为display: inline-block;，以便接收其子女的全部身高。

如何让浮动div在其父级中注册为内容？

3 个答案: