css,html help:向左和向右浮动,切断背景以扩展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).如果这样做,那么您的父级将需要指定宽度.

说明:

当一个元素浮动时,父元素不知道它的高度(除非它是一个浮动元素本身).你需要在浮动下面清楚,以便父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;'>

它会完成与迫使div关闭相同的事情.