使用 overflow、伪元素或 display: flow-root 可解决浮动导致的父元素高度塌陷。1. 设置 overflow: hidden 或 auto 触发 BFC，但可能裁剪溢出内容；2. 通过 .clearfix::after 添加伪元素并清除浮动，兼容性好且不影响布局，推荐使用；3. 使用 display: flow-root 创建新的块级格式化上下文，自动包含浮动子元素，代码干净但不支持 IE。根据项目需求选择合适方案即可。
当子元素使用了浮动（Float）后，父元素通常无法正确包裹这些子元素，导致布局出现问题。这是因为浮动元素脱离了正常的文档流，父元素在计算高度时会“忽略”它们，从而可能出现高度塌陷。为了解决这个问题，需要对浮动带来的影响进行清除。
使用 overflow 属性清除浮动
给父元素设置 overflow: hidden 或 overflow: auto 可以触发 BFC（块级格式化上下文），使父元素包含其浮动的子元素。
示例：
.parent {
overflow: hidden;
}
这种方法简单有效，但要注意如果子元素有超出父元素的内容（比如下拉菜单），可能会被意外裁剪。
立即学习“前端免费学习笔记（深入）”；
使用伪元素清除浮动（推荐）
通过在父元素末尾插入一个看不见的元素，并清除它的浮动，来撑开父容器。常用的是 ::after 伪元素。
通用清除浮动类：
.clearfix::after {
content: “”;
display: table;
clear: both;
}
将这个类应用到父元素上即可解决高度塌陷问题。这种方式不影响视觉效果，兼容性好，是现代开发中广泛采用的方法。
使用 display: flow-root（现代方法）
给父元素设置 display: flow-root 可以创建一个新的块级格式化上下文，自动包含所有子元素，包括浮动元素。
示例：
.parent {
display: flow-root;
}
这是目前最干净的解决方案，无需额外标签或 hack 手段，但不支持 IE 浏览器。
基本上就这些常用的清除浮动方式。根据项目兼容性要求选择合适的方法即可。不复杂但容易忽略。