CSS：基本布局问题-将嵌套元素彼此保持在一起

我不断发现，如果我在彼此内部嵌套div，并且其中一个内部div是浮动的，那么外部div不会围绕它展开

例如：

<div style='background-color:red; '>
    asdfasdf
    <div style='float:left; background-color:blue; width:400px; height:400px;'>
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
    </div>
    asdfasdf
</div>

asdfasdf
asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asdfasdf

我需要对外部div做什么才能覆盖内部div？IE：把它的边框/背景色放在周围

还有，我在这里碰到了一个普遍的原则吗？如果是这样的话，我应该通过什么来了解它是什么

谢谢

编辑

大家好

谢谢你的回答，语义正确和否，还有链接

虽然我最终会在最后的工作中使用溢出，但我会让Ant p的答案被接受，因为它是第一个真正有效的答案，让我摆脱了短期困境，尽管它冒犯了语义敏感性

---

作为一名长期从事html的黑客，我当然能够理解并同情使用语义不正确的黑客来完成这项工作，尽管我确信他会在这之后改变这个习惯=o）

你可以使用溢出：隐藏来严格地使用css

<div style='background-color:red;overflow:hidden;'>
...
</div>

...

如果只浮动外部div，它将扩展以包含嵌套的div。在布局中组合浮动和未浮动元素通常是很麻烦的。

这只是一些CSS问题的基本问题的惊人次数。更令人震惊的是，有多少次有人给出了像蚂蚁P这样的答案。虽然在技术上是正确的，但在语义上却是完全错误的。忒弥斯是绝对正确的。只需将

overflow:hidden

添加到浮动div的父级。有时，为了让IE玩得更好，你可能需要指定一个宽度或高度。这就是它的全部内容。

如果你是喜欢解释的类型（而不仅仅是“这样做”），这里有一些优秀的文章，解释了几种方法：

---

这篇文章绝对值得一读。正如Darko Z所说，看到Ant P给出的语义不正确的答案令人震惊。

我无法击败已经发布的答案，但我确实有一个很好的提示，可以帮助诊断布局问题，而不会弄乱标记

将此部分添加到CSS文件的底部，并在不需要时保留注释：

div
{
   border-width: thin !important;
   border-color: Orange !important;
   border-style: solid !important;
}

label, span, /* whatever else you might want to see */
{
   border-width: thin !important;
   border-color: Blue !important;
   border-style: solid !important;
}

---

通常，我会发现一个实际有效的布局（尤其是使用“添加

和

清除：两者都
样式的布局）实际上不会正确嵌套
，但是有人调整了CSS，使其能够通过巫毒来工作。实际上，查看元素的边框非常有帮助，在CSS中这样做意味着您不必触摸真正的标记或主CSS来打开边框进行调试。
阿门。这是正确的方法他的，不是公认的答案。看起来你需要将这两者结合起来，为ie和opera设置一个宽度。你可以对IE6使用“zoom:1”，这样你就不需要指定宽度。“overflow:hidden”应该适用于所有其他浏览器（包括IE7和opera，Eli）。事实上，除了“visible”之外的任何溢出值“将工作，但在溢出的情况下会导致不同的滚动条行为。我同意，这是非常悲哀的。IE的诀窍实际上是给有问题的项目“hasLayout”（如果你不确定的话，用谷歌搜索），其中的宽度和高度只是实现这一点的两种方法。“缩放：1.0”是实现这一点而不限制尺寸的少数IE专用方法之一。更正：在布局中使用浮动元素通常很麻烦；）