css, html help : 左右浮动，切断背景以扩展过去的div

我有一个向左浮动的 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>

谢谢你！

您必须清除漂浮物，以便父级可以包围它们。

<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）。如果您这样做，那么您的父母将需要指定宽度。

解释：

当元素浮动时，父元素不知道其高度（除非它本身是浮动元素）。您需要在浮动下方清除，以便父 div 识别其所有子级的完整高度。