Question

我一直发现，如果我在彼此内部嵌套了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>

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

另外，我在这里遇到的一般原则是什么？如果是这样，我应该怎么看才能深入了解它是什么？

谢谢！

修改

大家好，

感谢您的答案，语义正确，没有，以及链接。

虽然我最终会在最后的工作中使用溢出，但我会将Ant P的答案视为已被接受，因为它是第一个真正起作用的答案，并让我摆脱了短暂的干扰，即使它冒犯了语义敏感性

作为一个长期的html黑客试图转向体面的CSS布局，我当然可以理解并同情，使用语义错误的黑客来完成工作，虽然我相信他会在这之后改变这种习惯= o ）

Answer 1

您可以使用 overflow：hidden

严格使用CSS

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

Answer 2

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

Simple Clearing of Floats

How to Clear Floats Without Structural Markup

Clearing Floats

Answer 3

对于SO上的一些CSS问题来说，这简直是多次出现问题。更令人震惊的是有人给出像Ant P这样的答案多少次。虽然技术上是正确的，但在语义上完全不正确。忒弥斯是绝对正确的。只需将overflow:hidden添加到浮动div的父级即可。有时为了使它与IE玩得很好，您可能需要指定宽度或高度。这就是它的全部内容。

Answer 4

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

Answer 5

我无法击败已发布的答案，但我确实有一个很好的建议，可帮助诊断布局问题而不会搞砸你的标记。

将此部分添加到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;
}

通常我会发现实际有效的布局（特别是使用“<br>加clear: both样式的布局”）实际上不会正确嵌套<div>但有人调整了CSS以便它可以通过voodoo工作。实际上查看元素的边框有很大帮助，在CSS中这样做意味着你不必触摸你的真实标记或你的主要CSS来转向边界用于调试。

Answer 6

关于CSS systems的这篇文章绝对值得一读。正如Darko Z所说，看到Ant P.给出的语义错误答案是惊人的。

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

6 个答案: