CSS、HTML帮助：左浮动和右浮动，裁剪背景以扩展到div之外

Question

CSS、HTML帮助：左浮动和右浮动，裁剪背景以扩展到div之外

7

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

谢谢你！

- hellomello

2个回答

6

您不需要强制清除浮动 - 您只需要为任何相对定位的div定义overflow。Overflow:hidden和overflow:auto会关闭div，无需进一步干预，在IE6及以上版本中均可正常工作。

将第一行更改为：

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

并且它将实现与强制关闭div相同的效果。

- Holland

我在IE 6.0.2900.2180（XP下的真正IE6，在VirtualBox中）中进行了测试，结果与强制div版本完全相同。可能是您忘记了DTD - 不要忘记添加：`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">` 而不是普通的<html>。 - Holland

doctype 在浏览器渲染方面非常重要。 - Justus Romijn

啊，我明白了。现在我几乎完全使用HTML5 doctype。对这个答案点赞。 - Chris Harrison

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Harrison · Accepted Answer

你必须清除浮动，以使父元素能够包围它们。

<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识别所有子元素的完整高度。