html - 无法扩展容器 DIV

Question

这里有演示> http://jsfiddle.net/AndyMP/4hzXe/

我不明白为什么容器 DIV 没有扩展。

CSS

#container { 
position: relative;
width: 400px;
border: solid 1px #333;
padding: 20px;
}
#left { 
position: relative;
float: left;
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 10px;
overflow: hidden;
}

HTML

<div id="container">

<div id="left"></div>
<div id="left"></div>
<div id="left"></div>
<div id="left"></div>
<div id="left"></div>
<div id="left"></div>

</div>

Answer 1

您需要清除 float 。 http://jsfiddle.net/4hzXe/2/

添加了行overflow: hidden;，你可以使用clearfix .我大部分时间使用 clearfix 解决方案

#container { /* Preview content box */
    position: relative;
    width: 400px;
    border: solid 1px #333;
    padding: 20px;
    overflow: hidden;
}

我还将 id="left" 更改为 class="left"，id 应该只在页面上出现一次。