高度塌陷是指父元素在未指定高度的情况下(高度自适应子元素高度)，其内部的子元素因为设置了浮动属性，脱离文档流，导致父元素高度因为子元素的脱离变成了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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/index_page.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/page.css" />
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="content directory"></div>
<div class="content itemlist"></div>
</div>
<div class="footer"></div>
</body>
</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
