Div 标签内的 Div 标签在 Firefox 或 Chrome 中不起作用答案

【问题标题】：Div tags inside of Div tags not work in Firefox or ChromeDiv 标签内的 Div 标签在 Firefox 或 Chrome 中不起作用
【发布时间】：2014-08-30 01:29:28
【问题描述】：

这看起来非常简单，但我不知道为什么我不能将 div 标签放在容器 div 标签内，因为它不会正确显示在 Firefox 或 Chrome 中，但是它可以在IE6...？？？代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="container">
    <div id="nav">
        <p>Hello</p>
    </div>
</div>
</body>
</html>

CSS：样式.css

body {
    background:white;
    font-family: sans-serif;

}
#container {
    margin:0 auto;
    width:960px;
    background:#e3e3e3;
    border:1px solid black;
}
#nav {
    padding:10px;
    margin-top:10px;
    float:left;
    width: 400px;
    height:100px;
    background:white;
    border:1 px solid black;
}

就好像容器没有随着它里面的 DIV 标签扩展..什么给出了？

【问题讨论】：

标签： html firefox google-chrome

【解决方案1】：

这是人们使用 CSS 时经常遇到的问题。每当您浮动某些东西时，它的父级就会像您所看到的那样崩溃。您可以通过以下方式解决它：

在容器上设置显式高度
将溢出：隐藏或溢出：自动放在容器上
使用 clearfix hack：http://nicolasgallagher.com/micro-clearfix-hack/

我发现#2 在大多数情况下是最简单和最好的。溢出时使用#3:hidden/auto 有不良副作用。

【讨论】：

哇，谢谢，太简单了，我忘记了基本的东西，我刚开始做网络开发，我想我错过了一些基本的技巧！
这是 CSS 的一个奇怪的方面，一旦你理解了这一点和其他一些怪癖，你将势不可挡:)

【解决方案2】：

这是因为#nav div 向左浮动。浮动元素就是浮动的，没有高度，除非有东西通过清除浮动来锚定它下面的框。

 .clear { clear: both }

并在浮动 div 下方添加一个 div 以清除它。

 <div id="container">
     <div id="nav">
         <p>Hello</p>
     </div>
      <div class="clear"></div>
 </div>

有关 clearfixes 的详细答案，请参阅此 SO 问题：What methods of ‘clearfix’ can I use?

【讨论】：

这行得通，但我发现多余的标记是不可取的，尤其是当存在不需要它的替代方法时。
同意。我编辑了我的答案，并附上了一个关于最佳 clearfix hack 的问题的链接。

【解决方案3】：

为#container 执行overflow: hidden。

这是浮动的一种已知限制。

之前：http://jsfiddle.net/N669N/
之后：http://jsfiddle.net/N669N/1/

【讨论】：