为什么设置为块级元素的div没有自动获取高度？

Question

代码：

<div class="RightAsideBlock">
    <div class="BlockHeader">TEST HEADER</div>
    <div class="BlockContent ForTags">
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
        <div class="PopularTags"><a href="" >test</a></div>
    </div>
</div>

Css:

.RightAsideBlock {
    width: 100%;
    margin-bottom: 15px;
    box-shadow: 0.2em 0.2em 2px rgba(122,122,122,0.5);
}

.PopularTags {
    color: #acacac;
    background-color: #ededed;
    border: 0px;
    border: 1px solid #acacac;
    padding: 4px 5px;
    float: left;
    margin: 0 5px 5px 0;
    font-size: 12px;
}

在结果中我们有：

请告诉我为什么 div.ForTags 没有自动获取高度，而 div.PopularTags 超出了块边界 div.ForTags？

如何正确解决这个问题？

- user2881809

Answer 1

您需要添加以下规则

.ForTags { overflow: auto }

为包含浮动元素的父块创建一个块级格式上下文。

- Marc Audet

Answer 2

PopularTags 是浮动的，这意味着在计算其高度时，它们不会被视为包含元素的内容。您需要在浮动元素后添加一个样式为 clear: both; 的元素来解决这个问题。

在最后一个 PopularTags 元素之后添加其他 HTML 代码。

<div class="clearfix"></div>

附加 CSS

.clearfix { clear: both; }

关于清除浮动和其他解决方案的更多信息可以在这里找到：http://www.quirksmode.org/css/clearing.html

- Pervez Choudhury