Question

这看起来非常简单，但我不知道为什么我不能在容器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：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;
}

好像容器没有扩展，里面有DIV标签......什么给出了？

Answer 1

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

在容器上设置显式高度
将overflow：hidden或overflow：auto放在容器上
使用clearfix hack：http://nicolasgallagher.com/micro-clearfix-hack/

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

Answer 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?

Answer 3

overflow: hidden #container。{/ p>

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

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

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

3 个答案: