CSS - 什么是高度塌陷 及 高度塌陷的解决方法
一、什么是高度塌陷？
在文档流中，父元素的高度默认是被子元素撑开的，即子元素多高，父元素多高。但是为子元素设置浮动后，子元素会完全脱离文档流，此时会导致子元素无法撑起父元素，父元素高度塌陷。
<div class="a">
<div class="b">
</div>
</div>
1. 子元素未设置浮动
.b{
width: 100px;
height: 100px;
background-color: aqua;
}
此时，父元素被子元素撑起
2. 子元素设置浮动
.b{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
此时，父元素没有被子元素撑起，父元素高度塌陷
二、高度塌陷导致的问题
父元素高度塌陷，导致父元素下所有的元素都会向上移动，这样会导致页面布局混乱，在开发中一定要避免出现高度塌陷的问题
<div class="a1">
<div class="b">
</div>
</div>
<div class="a2">
</div>
.b{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.a2{
width: 100px;
height: 100px;
background-color: blueviolet;
}
b脱离文档流，导致a1高度塌陷，a2向上移动，和b重叠，页面布局混乱
三、解决方案
1、解决方案1：将父元素高度写死（不推荐）
父元素高度写死，可以避免塌陷问题，但是一旦将父元素高度写死，它将不能自动适应子元素的高度
.a1{
width: 100px;
height: 100px;
}
.b{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.a2{
width: 100px;
height: 100px;
background-color: blueviolet;
}
a2没有和b重叠
但是父元素不能自动适应子元素的高度，比如：我将b的高度设置为200px
.a1{
width: 100px;
height: 100px;
}
.b{
width: 100px;
height: 200px;
background-color: aqua;
float: left;
}
.a2{
width: 100px;
height: 100px;
background-color: blueviolet;
}
a2同样被b覆盖
所以不推荐使用
2、解决方案2：开启BFC
根据W3C标准，页面中的每一个元素都有一个隐藏的属性BFC（Block Formatting Context 块级格式化上下文）,该属性可以设置打开或者关闭，默认是关闭的
BFC概念：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
简单来说，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，反之也如此，并且 BFC 具有普通容器所没有的一些特性。
如何开启BFC
方法一：设置元素浮动（不能解决高度塌陷问题，不推荐使用）
方法二：设置元素的绝对定位（不能解决高度塌陷问题，不推荐使用）
方法三：设置元素为inline-block（不能解决高度塌陷问题，不推荐使用）
方法四：将元素的overflow设置为非visible值（推荐使用）
.a1{
overflow: hidden;
}
.b{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.a2{
width: 100px;
height: 100px;
background-color: blueviolet;
}
这是副作用最小的开启BFC的方法，推荐使用
注意：
在IE6及以下版本不支持BFC，所以使用此方法不能兼容IE6及以下版本
IE6中有另一个隐含的属性hasLayout，该属性的作用和BFC类似，可以开启hasLayout来解决问题
开启hasLayout的方式有很多，将zoom设置为1是副作用最小的方式
zoom表示放大，设置为几就放大几倍。该属性只在IE浏览器中支持，其他浏览器中都不支持
为了解决高度塌陷问题，并且兼容所有浏览器，最好的方法是都写上
3、解决方案三（较推荐）
步骤一：直接在高度塌陷的父元素的最后添加一个空的div，由于这个div没有浮动，所以它可以撑开父元素的高度
步骤二：然后对其进行清除浮动，通过这个空白div来撑起父元素的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a1{
}
/* 步骤二：对其进行清除浮动，通过空白div来撑起 */
.clear{
clear: both;
}
.b{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.a2{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="a1">
<div class="b">
</div>
<!-- 步骤一：在高度塌陷的父元素的最后添加一个空的div -->
<div class="clear"></div>
</div>
<div class="a2">
</div>
</body>
</html>
此方法基本没有副作用
缺点：虽然可以解决问题，但是会在页面中添加多余的结构
4、解决方案四（最推荐）
步骤一：通过::after选中a1的后面
步骤二：添加一个内容
步骤三：将其转化为块元素
步骤四：清除两侧浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 步骤一：通过::after选中a1的后面 */
.a1::after{
/* 步骤二：添加一个内容 */
content: "";
/* 步骤三：将其转化为块元素 */
display: block;
/* 步骤四：清除两侧浮动 */
clear: both;
}
.b{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.a2{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="a1">
<div class="b">
</div>
</div>
<div class="a2">
</div>
</body>
</html>
这种方法和添加一个div的原理一样，可以达到相同的效果，并且不会在页面中添加多余的结构
这是最推荐使用的方法，几乎没有副作用
在IE6不支持::after，所以在IE6中还需要使用hasLayout来处理
本文地址：https://blog.csdn.net/asfcyg/article/details/109248984