子元素浮动导致父元素高度塌陷解决方案

高度塌陷是指父元素在未指定高度的情况下(高度自适应子元素高度)，其内部的子元素因为设置了浮动属性，脱离文档流，导致父元素高度因为子元素的脱离变成了0。
形象化如图所示：
css.css

.header {
    background-color: #333333;
    width: 100%;
    height: 60px;
}

.content {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
}

.content .directory {
    background-color: chartreuse;
    width: 240px;
    height: 500px;
    float: left;
}

.content .itemlist {
    background-color: #CCCCCC;
    width: 240px;
    height: 500px;
    float: left;
}

.footer {
    background-color: #333333;
    width: 100%;
    height: 100px;
}

index.html

效果如下：

image.png

这里给出我个人认为的最好的解决方案，使用伪类元素，再用伪类元素清除浮动。
方案如下：
css.css

.header {
    background-color: #333333;
    width: 100%;
    height: 60px;
}

.content {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
}

/*伪类元素*/
.content:after {
    content: "";
    display: block;
    clear: both;
}

.content .directory {
    background-color: chartreuse;
    width: 240px;
    height: 500px;
    float: left;
}

.content .itemlist {
    background-color: #CCCCCC;
    width: 240px;
    height: 500px;
    float: left;
}

.footer {
    background-color: #333333;
    width: 100%;
    height: 100px;
}

效果如下：

image.png