在文档流中，父元素的高度默认是被子元素撑开的（没有设置宽高的时候），也就是子元素多高，父元素就多高。 当父元素的子元素设置为浮动类型时，那么因为其子元素脱离正常文档流，所以父元素无法检测到子元素的高度而产生折叠，这就是所谓的高度塌陷。
<head>
<style>
.right {
height: 100px;
width: 100px;
background-color: yellow;
float: right;
}
.block {
/* height: 200px;
width: 200px; */
background-color: green;
}
</style>
</head>
<body>
<div class="block">
<div class="right">右浮动</div>
</div>
</body>
如图可知，由于发生了高度塌陷，父元素完全折叠，我们看不到父元素。
高度塌陷引发的问题：
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
如何解决高度塌陷问题？
1，给父元素设置宽高，因为宽高已规定，所以不存在高度塌陷问题。但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
2，给父元素开启BFC（有较小的副作用，后面的文章会专门介绍BFC）
3，使用clear属性清除浮动影响 （有瑕疵）
可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用。
<style>
.right {
height: 100px;
width: 100px;
background-color: yellow;
float: right;
}
.block {
/* height: 200px;
width: 200px; */
background-color: green;
}
.empty {
clear: both;
}
</style>
<div class="block">
<div class="right">右浮动</div>
<div class="empty"></div>
</div>
使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
4，使用伪元素：：after （推荐）
<style>
.right {
height: 100px;
width: 100px;
background-color: yellow;
float: right;
}
.block {
/* height: 200px;
width: 200px; */
background-color: green;
}
.block::after{
content: "";
display: block;
clear: both;
}
</style>
<div class="block">
<div class="right">右浮动</div>
</div>
5，使用伪类.clearfix（一个特殊的伪类，可以当作了解）
<style>
.right {
height: 100px;
width: 100px;
background-color: yellow;
float: right;
}
.block {
/* height: 200px;
width: 200px; */
background-color: green;
}
.clear::before,
.clear::after {
content: "";
display: block;
clear: both;
}
</style>
<div class="block clear">
<div class="right">右浮动</div>
</div>
————————————————
版权声明：本文为CSDN博主「鲤鱼C c」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_48643318/article/details/126424291