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

Alk*_*mee 3 html firefox html5 google-chrome

这似乎非常简单,但我不知道为什么我不能在容器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>
Run Code Online (Sandbox Code Playgroud)

CSS:style.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;
}
Run Code Online (Sandbox Code Playgroud)

这就好像容器没有随着DIV标签内部扩展一样......给出了什么?

Nat*_*sos 5

这是人们用CSS面临的常见问题.每当你漂浮一些东西时,它的父母就会在你看到的时候崩溃.您可以通过以下方式解决此问题:

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

在大多数情况下,我发现#2是最简单和最好的.溢出时使用#3:隐藏/自动具有不良副作用.