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

你需要清除浮动。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 更改id="left"为 a class="left"，id 应该只在页面上出现一次。

Answer 2

您需要一种技术来包含您的浮动。至少有两种可能：

1. 包含花车和花车
2. 用 clear 包围浮动

哪种方法最适合您？（我的建议）

1. 如果你有一个可以承担清理工作的元素（例如 hr），请使用它。

2. 如果可以设置父级的宽度，请将 float 属性与宽度结合使用（这是您的情况）。

3. 否则使用 E​​asyclearing

4. 在简单的情况下使用溢出属性

Answer 3

尝试这个

.left { 
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    margin: 10px;
    overflow: hidden;
}

<div id="left"></div>变成<div class="left"></div>

演示：http: //jsfiddle.net/4hzXe/6/