css，html help：float left and right，cut off background to expand past div [英] css, html help : float left and right, cutting off background to expand past div

问题描述

我有一个div浮动左边和一个div浮动右边，我想有一个背景颜色更改。它改变背景，但它停止在浮动div之前。当我离开它，它继续具有我想要的正确的背景颜色。

I have a div floating left and a div floating right, and I would like to have a background-color changed. It changes the background, but it stops right before the floating divs. When I take them off, it continues having the correct background color that I desire.

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

谢谢！

推荐答案

您必须清除浮动，以便父母可以围绕它们。

You must clear the floats so the parent can surround them.

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

You can also, make the parent itself float, and then you won't need the additional markup (clearing div). If you do this, then your parent will need a width specified.

说明：

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

When an element is floating, the parent is not aware of its height (unless it is a floating element itself). You need a clear below the floats so that the parent div recognises the full height of all its children.

这篇关于css，html help：float left and right，cut off background to expand past div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！