为什么阻止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 div.PopularTags超出区块边界div.ForTags？

如何做对？

Answer 1

您需要添加以下规则

.ForTags { overflow: auto }

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

Answer 2

PopularTags是浮动的，这意味着在计算它的高度时，它们不计入包含元素的内容。您需要在具有clear: both;样式的浮动元素之后添加一个元素来修复它。

最后一个PopularTags元素

之后的其他HTML

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

附加CSS

.clearfix { clear: both; }

有关清除浮动和其他解决方案的更多信息，请访问：http://www.quirksmode.org/css/clearing.html