一般来说，父元素的高度由内容撑起。如果内容设置了浮动，其会脱离文档流，导致父元素高度塌陷。
问题描述：
<head>
<meta charset="utf-8">
<title></title>
<style>
.father {
border: 3px dashed black;
}
.red {
width: 100px;
height: 100px;
background-color: red;
}
.green {
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="red"></div>
<div class="green"></div>
</div>
</body>
此时，父元素高度由红、绿两个块级元素撑起：
.red {
width: 100px;
height: 100px;
background-color: red;
float: left; /* 设置浮动 */
}
.green {
width: 50px;
height: 50px;
background-color: green;
float: left; /* 设置浮动 */
}
给红、绿子元素设置浮动，结果导致父元素高度塌陷：
解决办法：
1.父元素内增加额外标签，用clear: both;来清除前面元素的浮动。
<div class="father">
<div class="red"></div>
<div class="green"></div>
<div style="clear: both;"></div> /* 新增元素 */
</div>
2.父元素设置overflow: hidden;属性
.father {
border: 3px dashed black;
overflow: hidden;
}
3.单伪元素方法
这个方法类似方法一，用到伪类:after相当于我们自己在父元素内创造一个块级元素。
.clearfix:after {
content: "";
display: block;
clear: both;
}
4.双伪元素法(此方法较稳妥、全面，推荐使用)
.clearfix:after,
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
以上为清除浮动、解决父元素塌陷的四种方法。才疏学浅，哪里有缺漏还请各位大佬指教。
