关于css：为什么阻止div不能获得高度自动？


Why block div not get height auto?

本问题已经有最佳答案，请猛点这里访问。

代码：

1
2
3
4
5
6
7
8
9
10
    TEST HEADER
   
        test
        test
        test
        test
        test
        test
        test
        test

Css：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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;
}

结果我们得到：

enter image description here

请告诉我为什么div.ForTags不自动获得高度，并使div.PopularTags移动到块边界div.ForTags之外？

怎么做对了？

您需要添加以下规则

1
.ForTags { overflow: auto }

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

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

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

1
 

附加CSS

1
.clearfix { clear: both; }

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