Question

我有这个HTML代码

<div id="b_container">
    <div id="b_header">
        <div class="header_left"><a href="#">link 1 </a></div>
        <div class="header_left"><a href="#">link 2 </a></div>
        <div class="header_left"><a href="#">link 3 </a></div>
    </div>
    <div id="b_content">content goes here</div>
    <div id="b_footer">footer goes here</div>
</div>

我使用了这个css代码

#b_container
{
    margin-right: auto;
    margin-left: auto;
    background: red;
    width:900px;
    padding: 10px;
}

#b_header{
    background: #FFF;
    padding: 5px;

}
.header_left{
    float: left;
    width:100px;
    background: #CCCC00;

}
#b_footer{
    background: #FFF;
    padding: 5px;
}
#b_content{
    background: #00FFFF;
    padding: 5px;
    height: 100px;
}

但结果显示了b_content上方的三个div（带有header_left类）。为什么？

Answer 1

您必须停止div的浮动（使用班级header_left）。您可以将以下行添加到#b_header：

overflow: hidden;

另见example。

另一种方法是在ID为clear: both;的div中添加一个空{div}，其中b_header为最后一个。请参阅此example。

Answer 2

但结果显示了三个div（带有header_left类） b_content。为什么？

这是因为您没有清除浮点数，您可以使用overflow:hidden属性或添加具有clear:both属性的div作为父div的最后一个子项来执行此操作容器

Answer 3

基本上，有了flaots，你需要清除它们，只需用这个css创建一个div：clear: both。

这应该可以解决问题。

详细了解浮动here

如何在div中添加Div，但是将它们浮动到左边？

3 个答案: