当添加更多内容时，Div高度不会调整大小。

Question

我正在尝试构建一种tag-cloud。我有一个div (标记容器)，在其中我添加了跨节点(标记)。

span节点是默认的内联元素，因此如果我设置了它们的display属性do display:block，以防止它们水平溢出div。

我还将它们的float属性设置为float:left，因为我希望它们位于同一行附近，如果行已满，它们将自动转到下一行。

现在的问题是，标签在底部垂直溢出。标签容器不会调整其高度以包含插入的所有标记。我怎么才能解决这个问题？

编辑这里是小提琴。http://jsfiddle.net/Vk92s/1/

如您所见，如果注释float: left，div会自动调整大小，但所有标记都会在新行上显示。相反，如果我添加float: left，标签就会正确包装，但是div不会调整大小。

Answer 1

这是一个小提琴。

可以将overflow设置为hidden，如下所示：

<div id="test"> 
    <span>first</span> 
    <span>second </span> 
    <span>third </span> 
    <span>fourth </span> 
</div> 

#test
{
   border: 1px solid black;
   width: 100px; 
   overflow: hidden; 
}
span
{
  float: left;
}

Answer 2

尝试在所有元素下添加一个具有clear: both设置的div。

工作演示

HTML

<div id="tag-cloud">
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <div class="clear-both"></div>
</div>

CSS

.tag{
    display: block;
    width: 98px;
    background-color: red;
    margin-right: 2px;
    float: left;
}
.clear-both{
    clear: both;
}
#tag-cloud{
    width: 300px;
    background-color: black;
}

Answer 3

在标记容器div中，添加以下css规则：

overflow: auto;

这将使其扩展到包含其浮动内容。

编辑：

小提琴：http://jsfiddle.net/5AgxU/