目录
高度塌陷介绍
谈及高度塌陷这一概念，不得不涉及到一个程序用语，也就是高度自适应，在我们实际开发中，父容器盒子的高度是很难给出的，一般我们要把子元素全部添加完成后，再通过所有子元素的高度，去计算父容器，应该给的高度，但是如果我们临时要添加一个子元素，我们又要依据子元素的自身情况，去更新父容器的高度，这一来二去的便显得十分的繁琐，所有就有了这样一个想法，我们父容器不给高度，任由子元素撑开盒子，能撑开多高，父容器就有多高，这也就是高度自适应，但是在我们实际开发中，我们需要用到浮动或者定位去进行页面的布局，可是我们了解到，如果给一个盒子赋予浮动或者某些定位属性，他们便会出现脱标的情况，在原标准流中不占有位置，那么设想当一个父容器的所有的子元素都被设置了浮动或者某些定位的属性，他们在原标准流中便不会占有位置，父容器便不会被子元素所撑开，高度则为0px，便会出现高度塌陷。
浮动产生的高度塌陷
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度塌陷</title>
<style>
.box1,
.box2 {
border: 2px solid black;
width: 500px;
}
.box1 .xbox1,
.box1 .xbox2,
.box1 .xbox3 {
float: left;
width: 100px;
height: 100px;
}
.box2 .xbox1,
.box2 .xbox2,
.box2 .xbox3 {
width: 100px;
height: 100px;
}
.xbox1 {
background-color: red;
}
.xbox2 {
background-color: green;
}
.xbox3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="xbox1"></div>
<div class="xbox2"></div>
<div class="xbox3"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="box2">
<div class="xbox1"></div>
<div class="xbox2"></div>
<div class="xbox3"></div>
</div>
</body>
</html>
两个大盒子之间写了许多的换行，方便大家参考对比，如果把换行都注释掉，下面的大盒子就会移动到，上面长方形的下面，紧挨着上一个大盒子的下边框，其效果如下图所示：
给父容器设置高度
通过上文，我们了解到，高度塌陷是由于子元素脱离标准流，无法将盒子撑开，而导致的结果，那我们不妨反过来想，如果我们直接给父容器设置高度，不就可以避免高度塌陷了嘛。
.box1
{
height: 100px;
}这种方法是可以解决高度塌陷的问题，不过可以发现比较繁琐，故不推荐使用。
给父容器设置浮动
如果我们将父容器也设置浮动的属性，父容器和子元素都脱离的标准流，那就可以实现高度自适应。
.box1
{
float: left;
}
这种方式也可以解决高度塌陷的问题，但是如此处理，整个上面的大盒子就会脱离标准流，在原来标准流中，不占有位置，下面的盒子就会移动上去，被原来浮动的大盒子压在下面，有时又会造成新的问题，故不推荐使用。
给父容器设置overflow:hidden属性
父级元素设置了overflow:hidden属性后，布局正常，触发了BFC，导致了该父级就会按照BFC的规则进行布局，而BFC的规则之一便是，计算BFC的高度时，浮动元素也计算在内。(这个就是用overflow:hidden;来清除浮动，重新算高度的原理)
.box1
{
overflow: hidden;
}
利用清除浮动
为了更好的解决塌陷问题，我们可以在父容器的最后一个子元素的下面添加一个块级元素，代码如下图所示：
如果父容器的子元素没有浮动，则这个块级元素不起效果，页面上是显示不出来的，但是如果父容器的子元素除了它，都浮动起来了，那么这个块级元素就会向上移动，被浮动的盒子压在底下：
如果此时，我们对这个块级元素进行清除浮动的处理 （这里的清除浮动，是清除其他子元素浮动，脱离标准流给它带来的影响），它便会移动到浮动盒子的最下面，从而达到，撑开盒子的目的。
.box1 .qingchu {
clear: both;
}
现在我们来评价一下这种做法，这种做法，小规模使用是影响不大的，如果在一个页面中，大规模使用这种方式去处理高度塌陷的问题，则会造成代码冗余，而且还会增加页面的渲染时间。
万能清除浮动法
给塌陷的元素添加伪对象，其效果相当于在父容器的最后一个子元素下面，添加一个块级元素，对其进行清除浮动的处理，从而达到撑开盒子的目的。
以这种方式处理由于浮动造成的高度塌陷问题，所产生的副作用最小，推荐使用！！！
定位产生的高度塌陷
此时只有一种处理方法，就是给父容器添加高度。
案例演示源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度塌陷</title>
<style>
.box1,
.box2 {
border: 2px solid black;
width: 500px;
}
/* 浮动引起的高度塌陷 */
/* 1.给父容器设置高度 */
/* .box1
{
height: 100px;
} */
/* 2.将父容器设置浮动属性 */
/* .box1
{
float: left;
} */
/* 3.给父容器设置overflow:hidden属性 */
/* .box1
{
overflow: hidden;
} */
/* 4.利用清除浮动 */
/* .box1 .qingchu {
clear: both;
} */
/* 5.万能清除浮动法 */
.clearfix:before,.clearfix:after
{
content: '';
display: block;
clear: both;
}
/* 定位引起的高度塌陷 */
.box1 .xbox1,
.box1 .xbox2,
.box1 .xbox3 {
float: left;
width: 100px;
height: 100px;
}
.box2 .xbox1,
.box2 .xbox2,
.box2 .xbox3 {
width: 100px;
height: 100px;
}
.xbox1 {
background-color: red;
}
.xbox2 {
background-color: green;
}
.xbox3 {
background-color: blue;
}
.box2 div
{
position: absolute;
}
.box2
{
height: 100px;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="xbox1"></div>
<div class="xbox2"></div>
<div class="xbox3"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="box2">
<div class="xbox1"></div>
<div class="xbox2"></div>
<div class="xbox3"></div>
</div>
</body>
</html>