Css 如何填充对齐块的背景？

我有以下代码：

<div style="background-color:Aqua">
    <div style="float:left">left</div>
    <div style="float:right">right</div>
</div>

…具有浅绿色背景，但块不填充颜色

---

我做错了什么？

清除浮动，例如使用

溢出：隐藏

<div style="background-color:Aqua; overflow: hidden">
    <div style="float:left">left</div>
    <div style="float:right">right</div>
</div>


左边
正确的
浮动-定位规则取决于某个东西，所以如果没有该东西，您将永远不会对齐对象。
因此，您应该使用以下顺序：

<div style="background-color:Aqua">
  <div style="float:right;max-width:50%;">Right</div><!-- 100% by default -->
  <div>Left</div>
  <div style="clear:right;"></div><!-- closing the floating -->
</div>


赖特
左边

除此之外：

<div style="background-color:Aqua">
  <div style="float:left;max-width:50%;">Left</div>
  <div>Right</div>
  <div style="clear:left;"></div>
</div>


左边
赖特

或两者兼而有之：

<div style="background-color:Aqua">
  <div style="float:left;max-width:30%;">Left</div>
  <div style="float:right;max-width:30%;">Right</div>
  <div>Center</div>
  <div style="clear:both;"></div>
</div>


左边
赖特
居中
我是否可以建议使用健壮的clearfix，尤其是这个：

添加以下CSS：

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

.clearfix:before，
.clearfix:之后{
内容：“.”；
显示：块；
身高：0；
溢出：隐藏；
}
.clearfix:在{clear:两者；}之后
.clearfix{zoom:1；}/*IE<8*/

然后给你的父母aqua div a
class=“clearfix”

这是IE7中的一个。
溢出
触发器
hasLayout
，IE8处理它differently@crowjonah那又怎么样？问题不在于IE的不同版本如何对待它——它在IE7和IE8中起作用——如果有绝对定位的元素在起作用，你的答案就不起作用——我只是想帮助提问者，我是第一个投票支持你的答案的人，所以冷静点，嗯？@crowjonah抱歉的人。。关于绝对定位元素，您是对的，但是OP没有提到任何东西，除了容器中的2个浮动div-s。。甚至IE7要求也出现在评论的后面。您也可以尝试其他解决方案：
.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */