为什么阻止div不能自动获得高度？ [复制]答案

【问题标题】：Why block div not get height auto? [duplicate]为什么阻止div不能自动获得高度？ [复制]
【发布时间】：2014-01-03 06:38:50
【问题描述】：

代码：

<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 ？

如何正确？

【问题讨论】：

标签： css css-float

【解决方案1】：

您需要添加以下规则

.ForTags { overflow: auto }

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

【讨论】：

【解决方案2】：

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

最后一个 PopularTags 元素之后的附加 HTML

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

附加 CSS

.clearfix { clear: both; }

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

【讨论】：