css - 带有浮动元素的背景颜色

Question

我想DIV在 main中放置 2 个 vertical 时遇到问题DIV。该background-color值不适用于 main DIV。我想我必须看到一些带有红色背景颜色的部分。
请看一下它的jsFiddle并帮助我解决它。

Answer 1

尝试添加一个带有clear:bothCSS 属性的空 div 或为主 div 设置一个高度。

<div id="content">
    <div id="float-left">Some Text floating left</div>
    <div id="float-right">Some Text floating right</div>
    <div id="clear"></div>
</div>

CSS 代码

#content {
    background-color:red; /* The background you want */
    width:500px; /* Demo: not important */
}

#float-right {
    float:right;
    width:300px;
    padding-right:20px;
    line-height:200%;
    background-color:#f2f2f2
}

#float-left {
    float:left;
    width:50px;
    background-color:#e1e1e1
}

#clear{
   clear:both
}

看演示

Answer 2

这是因为您的父 DIV 没有高度。您将子 DIV 设置为浮动，这样它就不会影响父 DIV 的大小。您将需要手动设置父 DIV 的高度或使用 clear:both; 属性