css 高度塌陷产生的原理：
在解决这个问题之前首先我们要了解下什么是浮动，然后还需要知道高度塌陷产生的原因，最后才能根据我们的实际需求解决css的高度塌陷问题。
浮动
float:left;/*float属性具有left和right两个值分别表示左浮动和右浮动*/
对于设置了float属性的页面元素将脱离文档流在容器中处于一种漂浮的状态。
高度塌陷产生的原因
通常在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当其子元素设置浮动属性之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。如下图所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css高度塌陷</title>
<style>
div{
width: 200px;
border:3px solid red
}
#son{
height:200px;
width:200px;
border:3px solid green;
float:left;/*left：左浮动*/
}
</style>
</head>
<body>
<div>
<div id="son">子代div</div>
</div>
</body>
</html>
几种常用解决方式
1.在该浮动元素下方新添加一个空div标签设置“clear：both；”清除浮动，但该方法容易造成代码冗余。
2.最简单粗暴的方法就是给父元素设置宽高，该方法兼容性好但非浏览器自适应影响不同的用户体验。
3.给父元素添加“overflow:hidden;”属性，但该方法有可能造成定位内容不可见问题。
4.给父元素也设置浮动，该方法不推荐，容易造成布局混乱。
5.利用after伪类清除浮动,该方法最为理想，利用伪类的特性未造成任何代码冗余，伪类代码如下：
#clearfloat:after{
clear: both;
content: "";
height:0;
display: block;
overflow: hidden;
}
来源：CSDN
作者：Lin&CQ
链接：https://blog.csdn.net/qq_44170536/article/details/103605109