html - 背景未显示在具有 2 个 Div Html 的 DIV 上

Question

我有一个“容器”DIV，里面有 2 个不同高度的浮动 DIV，当我在“容器”DIV 上应用背景属性时，它不起作用。

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
</div>

http://jsfiddle.net/arthurg/XUmsU/

如何在容器上显示背景（使用 CSS）？

Answer 1

添加溢出：隐藏；到容器。像这样：

#container{
    height:100%;
    background:red;
    overflow:hidden;
}

Answer 2

http://jsfiddle.net/XUmsU/1/

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

#container{
   height:100%;
   background:red;
  overflow:hidden;
 }

#left{
   width:100px;
   background:green;
   height:30px;
   float:left;
 }

Answer 3

你需要清除浮动。

<br style="clear: both"/>在这两个浮动 div 之后添加它。

HTML：

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
    <br style="clear: both"/>
</div>

http://jsfiddle.net/XUmsU/3/

clearfix 还有其他（新）方法（带有伪类:before和:after）。