一.高度塌陷产生原因：
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷
二.造成后果：
父元素的高度一旦塌陷，所有标准流中元素的位置将会上移，导致整个页面布局混乱
三.解决方案：
1.开启父元素的BFC:
（1）Block Formatting Context 块级格式化环境
（2）BFC是元素的隐含属性，默认是在关闭状态的
（3）可以通过一些特殊的样式，来开启BFC
（4）开启BFC后元素具有如下特性：
父元素的垂直外边距不会与子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动子元素
（5）开启BFC的方式有：
设置元素浮动
设置元素的浮动定位
设置元素的类型为inline-block
设置overflow为一个非默认值，一般用overflow：hidden开启BFC
2.在塌陷的父元素最后添加一个空白的div，然后对该div进行清除浮动：
（1）代码示例：
<div id="box1">
<div id="box2"></div>
<div style="clear:both"></div>
</div>
（2）存在问题：使用这种方式会在页面中添加多余的结构
（3）清除浮动：
有时希望清除掉其他元素浮动对当前元素产生的影响，可以用clear来完成功能
clear可以用来清除其他浮动元素对当前元素的影响
（4）clear可选值：
none：默认值不清楚浮动
left：清除左侧浮动元素对当前元素的影响
right：清除右侧浮动元素对当前元素的影响
both：清除两侧浮动元素对当前元素的影响
3.使用after伪类，向父元素添加一个块元素，并对其进行浮动：
（1）该种方式原理与方法二原理一样（相当于在在后面加了一个空div），但是不用向页面添加对应的结构
（2）示例代码：
.clearfix:after
{
content："";
display:block;
clear:both;
}
四.高度塌陷完善：
1.子标签浮动，父标签高度崩塌
2.子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素：
使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠
3.也可以使用伪元素或者伪类before、after实现：
.clearfix:after,.clearfix:after{
content："";
display:table;
clear:both;
}
4.通过修改后的clearfix是一个多功能的既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
来源：CSDN
作者：业余敲代码
链接：https://blog.csdn.net/weixin_39676449/article/details/88726232