CSS：基本布局问题 - 将嵌套元素保持相互内部

CSS: Basic layout question - keeping nested elements inside each other

提问人：Eli 提问时间：12/3/2008 最后编辑：mskfisherEli 更新时间：12/24/2016 访问量：3069

问：

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

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

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

谢谢！

编辑

大家好

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

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

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

css 布局 css-float

评论

答：

14赞 themis 12/3/2008 #1

你可以严格地使用 CSS 使用 overflow：hidden 来做到这一点

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

评论

0赞 CMPalmer 12/3/2008
阿门。这是正确的方法，而不是公认的答案。
0赞 Eli 12/4/2008
看起来您需要将 ie 和 opera 的宽度结合起来。
0赞 mercator 12/9/2008
您可以在 IE6 中使用“zoom： 1”，因此您不需要指定宽度。“overflow： hidden”应该适用于所有其他浏览器（包括 IE7 和 Opera、Eli）。事实上，除了“visible”之外，任何溢出值都可以工作，但在溢出的情况下会导致不同的滚动条行为。
1赞 Dave Ward 12/3/2008 #2

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

评论

0赞 chharvey 6/2/2014
更正：在一般情况下，使用浮动元素进行布局通常很麻烦;)
3赞 Darko 12/3/2008 #3

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

评论

0赞 annakata 12/3/2008
我同意，这很可悲。IE的诀窍实际上是给有问题的项目“hasLayout”（如果你不确定，谷歌）哪个宽度和高度只是做到这一点的几种方法。“zoom：1.0”是少数几个在不限制尺寸的情况下实现此目的的 IE 唯一方法之一。
4赞 J.C. Yamokoski 12/3/2008 #4

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

浮子的简单清除

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

清除浮动

0赞 John Polling 12/3/2008 #5

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

1赞 CMPalmer 12/3/2008 #6

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

将此部分添加到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 即可打开边框进行调试。<br>clear: both<div>

上一个：国际电话和地址数据？

下一个：我可以在 Silex 中禁用错误/异常处理吗？