css - 如何填充对齐块的背景？

Question

我有以下代码：

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

我想显示...

left                                                                        right

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

我究竟做错了什么？

Answer 1

浮动 - 定位规则取决于某些东西，所以没有那个东西你永远不会对齐对象。因此，您应该使用以下顺序：

<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>

Answer 2

我是否可以建议使用强大的 clearfix，尤其是这个：http ://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

添加这个CSS：

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

然后给你的容器，父母aqua div aclass="clearfix"

这是一个小提琴演示。

Answer 3

清除你的浮动，例如overflow: hidden

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