高度塌陷
高度塌陷简单说就是，父级元素包涵的子元素浮动了，当父级元素没有设置高度时，会因为没有子元素“撑开”，而变成一条线。
<style>
* {
padding: 0;
margin: 0;
}
#app { // 父元素没有设置高度
width: 100%;
background-color: red;
border: 1px solid black;
}
img {
float: left; // 左浮动
}
</style>
<body>
<div id="app">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661177204&t=85b487d27a347a116011da18319322ce" height="400px" alt="image">
<div>gogogo</div>
</div>
<div>2022</div>
</body>
高度塌陷效果图
清除浮动
1. 给父级元素定义高度（实际情况下不方便，不推荐）
#app {
height: 400px; //给父元素设置高度
width: 100%;
background-color: red;
border: 1px solid black;
}
成功效果图
2.结尾添加空标签，给其设置 clear：both（不推荐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#app {
width: 100%;
background-color: red;
border: 1px solid black;
}
img {
float: left;
}
.a {
clear: both;
}
</style>
</head>
<body>
<div id="app">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661177204&t=85b487d27a347a116011da18319322ce" height="400px" alt="image">
<div>gogogo</div>
<div class="a"></div>
</div>
<div>2022</div>
</body>
</html>
成功效果图
3. 给父级元素添加overflow: hidden（推荐）
#app {
overflow: hidden;
width: 100%;
background-color: red;
border: 1px solid black;
}
成功效果图
