5

我不断发现，如果我在彼此内部嵌套了 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 的答案，因为它是第一个真正有效的答案，并且让我摆脱了短期的卡顿，即使它冒犯了语义敏感性。

作为一个长期尝试转向体面的 css 布局的 html hack，我当然可以理解并同情使用语义不正确的 hack 来完成工作，尽管我相信他会在此之后改变这种习惯 =o)

4

6 回答 6

14

您可以使用溢出来严格使用 CSS:hidden

<div style='background-color:red;overflow:hidden;'>
...
</div>
于 2008-12-03T03:58:34.750 回答
4

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

浮标的简单清除

如何在没有结构标记的情况下清除浮动

清除浮动

于 2008-12-03T08:34:58.640 回答
3

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

于 2008-12-03T05:33:57.040 回答
1

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

于 2008-12-03T04:04:41.337 回答
1

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

将此部分添加到 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 以便它通过巫术来工作。实际上是看边界您的元素有很大帮助，在 CSS 中执行此操作意味着您不必触摸真实标记或主要 CSS 即可打开边框以进行调试。

于 2008-12-03T15:26:46.187 回答
0

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

于 2008-12-03T08:45:15.937 回答