答案：解决浮动导致父容器高度塌陷的方法有四种。1. 使用clear清除浮动，通过添加空元素并设置clear: both实现，但需额外HTML结构；2. 给父容器设置overflow: hidden或auto触发BFC，使父容器包含浮动元素，但可能裁剪内容；3. 使用伪元素::after插入隐藏元素并清除浮动，推荐方案，无需额外标签且兼容性好；4. 采用Flex或Grid布局替代浮动，从根本上避免问题，适用于新项目。优先推荐伪元素clearfix或现代布局方式。
当使用 CSS 的
float
属性让元素浮动时，常会导致父容器无法正确包裹子元素，出现
高度塌陷
问题。这是因为浮动元素脱离了正常的文档流，父容器“看不见”它的存在，从而高度计算为0或不完整。以下是几种常用且有效的解决方法。
1. 使用 clear
清除浮动
在浮动元素的末尾添加一个空元素，并设置
clear: both
来清除浮动影响。
示例：
虽然有效，但需要额外 HTML 元素，不够优雅。
2. 使用
overflow
触发 BFC
给父容器设置
overflow: hidden
或
auto
可以触发块级格式化上下文（BFC），使父容器包含所有浮动子元素。
立即学习
“
前端免费学习笔记（深入）
”；
CSS 示例：
优点是无需添加额外标签，但需注意
overflow: hidden
可能会裁剪内部的定位元素或阴影效果。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
3. 使用
伪元素
清除浮动（推荐）
通过 ::after 伪元素在内容末尾插入一个隐藏的块级元素并清除浮动，既不影响结构又兼容性好。
通用 clearfix 类写法：
将
class="clearfix"
添加到父容器即可解决塌陷问题，现代开发中广泛使用。
4. 使用 Flex 或 Grid 布局替代浮动
对于新项目，建议用更现代的布局方式代替浮动。例如使用
display: flex
实现类似效果，天然避免塌陷问题。
示例：
Flex 和 Grid 布局更强大、语义清晰，且不会产生浮动带来的副作用。
基本上就这些方法。如果必须用浮动，推荐使用伪元素 clearfix 方案；如果是新项目，直接改用 Flex 更省心。
左浮动
右浮动
.parent {
overflow: hidden; /* 或 overflow: auto */
}
.child {
float: left;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
/ 或更完整的版本 /
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
zoom: 1; / 兼容 IE6/7 */
}
.parent {
display: flex;
justify-content: space-between;
}
/* 子元素不再需要 float */