css，html帮助：左右浮动，关闭背景以扩大div div

Question

我有一个div向左浮动，div向右浮动，我想要更改背景颜色。它改变了背景，但它在浮动div之前停止。当我将它们取下时，它会继续保留我想要的正确背景颜色。

<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'> 
    <div style='width:1091px;margin:0 auto;margin-top:70px;'> 
     <div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'> 
      float LEFT 
     </div> 
     <div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'> 
      float RIGHT 
     </div> 
    </div> 
</div> 

谢谢！

Answer 1

您必须清除浮动块，以便父级环绕它们。

<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'> 
    <div style='width:1091px;margin:0 auto;margin-top:70px;'> 
     <div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'> 
      float LEFT 
     </div> 
     <div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'> 
      float RIGHT 
     </div> 

     <!--HERE IS THE CLEARING DIV: --> 
     <div style="clear: left;"></div> 
    </div> 
</div> 

您也可以让父项本身浮动，然后您将不需要额外的标记（清除div）。如果你这样做，那么你的父母将需要一个指定的宽度。

说明：

当元件是浮置的，所述亲本不知道其高度（除非它是一个浮动元件本身）。你需要在花车下方清楚，以便父母认识到所有孩子的全部身高。

Answer 2

您不需要强制清除浮动 - 只需要为任何位置定义溢出：相对div。溢出：隐藏和溢出：在没有任何进一步干预的情况下自动关闭div，从IE6开始。

更改第一行：

<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative; overflow:hidden;'> 

，它会做到同样的事情，迫使格关闭。