DIV 标记未正确嵌套答案

【问题标题】：DIV tags not being properly nestedDIV 标记未正确嵌套
【发布时间】：2010-05-22 08:46:29
【问题描述】：

我创建了一些<div> 标签，并将其设置为包含两个浮动到<div> 两侧的<div> 标签。
我注意到，当我尝试设置包含 <div> 的背景颜色时，它没有正确环绕它应该包含的 <div>s。我想知道为什么会这样。

我在这里看到了一个类似的问题Why are these Div tags not nesting properly?，但没有人解释为什么会在任何答案中发生这种情况。

【问题讨论】：

【解决方案1】：

当您浮动内部 div 时，会将它们从正常的文档流中取出，因此您的包含 div 基本上没有内容和高度。

你可以通过添加一个来解决它：

overflow: hidden;

到外部 div（只是一种可能的解决方案）。

【讨论】：

Jeroen 的解决方案效果很好。您还可以在内部 div 下使用诸如
之类的空元素，并将 clear:both 用于样式表中的 clear 类。（如果隐藏溢出对您的布局来说是个问题）
@edl，是的，但我更喜欢溢出解决方案，因为clear:both 倾向于清除的不仅仅是包含框。
同意。 :) 我也更喜欢溢出解决方案。仅取决于个人应用程序。
@edl，绝对没有灵丹妙药适用于所有情况。

【解决方案2】：

将style="overflow:hidden;width:100%" 添加到包含的 div 中

我认为style="overflow:hidden;" 对于大多数浏览器来说已经足够了，我似乎记得有些 IE 需要设置宽度。

【讨论】：

只有在 quirksmode 并且你不想这样的时候。
@BalusC，不，在 IE6（所有模式）中，元素需要获得 layout 以包含其浮动。设置width 可以做到这一点，但我更喜欢zoom: 1。在IE7中，overflow已经给出了元素布局。
@mercator：哦，我忘了 IE6 曾经存在过。但是，是的，你是对的 :)