何为高度塌陷？
何为高度塌陷？ 话不多说直接上案例。
<div class="box">
<div class="box1">
我是box1
</div>
</div>
<div class="box2">我是box2</div>
.box {
width: 800px;
background-color: skyblue;
}
.box1 {
width: 500px;
height: 200px;
background-color: aqua;
float: left;
}
.box2 {
width: 600px;
height: 400px;
background-color: #ff3040;
}
从图中我们可以看见，当父元素 .box 高度自适应时，它的子元素 .box1 浮动（脱离文档流）后，它的高度就变成了 0 ，其下边的元素会上来占据位置。
总结：
父元素高度自适应，子元素float之后，造成父元素高度为0，称为高度塌陷。
解决高度塌陷问题的方法及其优缺点：
由于高度塌陷是由浮动带来的，所以解决解决高度塌陷问题就是要清除浮动。
1、给父容器一个固定高度（极其不推荐）
.box {
width: 800px;
height: 300px;
background-color: skyblue;
}
优点：代码量少、简单易懂
缺点：很显然这种解决方式只适合在高度固定的时候使用，需要给出精确地高度，不利于布局。
2、给父元素添加 overflow:hidden
.box {
width: 50px;
/* height: 300px; */
background-color: skyblue;
overflow: hidden;
}
.box1 {
width: 500px;
height: 200px;
background-color: aqua;
float: left;
}
.box2 {
width: 600px;
height: 400px;
background-color: #ff3040;
}
优点：简单易懂、兼容性强
缺点：由于 overflow:hidden 属性超出文档部分不显示，所以当子元素用到定位时，会出现bug，不推荐使用。
3、在浮动元素下方添加空div，并给元素声明 clear：both
<div class="box">
<div class="box1">
我是box1
</div>
<div></div>
</div>
<div class="box2">我是box2</div>
.box {
width: 50px;
/* height: 300px; */
background-color: skyblue;
/* overflow: hidden; */
}
.box1 {
width: 500px;
height: 200px;
background-color: aqua;
float: left;
}
.box2 {
width: 600px;
height: 400px;
background-color: #ff3040;
}
.box div:nth-child(2) {
clear: both;
}
优点：代码少，浏览器兼容好
缺点：需要添加多余的空标签并添加属性，不推荐使用，此方法是以前主要是用的一种清除浮动的方法。
4、万能清除法
<div class="box">
<div class="box1">
我是box1
</div>
</div>
<div class="box2">我是box2</div>
.box {
width: 50px;
/* height: 300px; */
background-color: skyblue;
/* overflow: hidden; */
}
.box1 {
width: 500px;
height: 200px;
background-color: aqua;
float: left;
}
.box2 {
width: 600px;
height: 400px;
background-color: #ff3040;
}
.box::after {
content: "";
display: block;
clear: both;
}
/* 解决 IE 浏览器的兼容问题 */
height: 0;
overflow: hidden;
/*去隐藏content中的内容 */
visibility: hidden;
优点：兼容性强
缺点：代码较多