答案：解决CSS浮动导致高度塌陷的常用方法有四种。1. 使用伪类clearfix，通过::after添加清除浮动，兼容性好；2. 触发BFC，推荐display: flow-root，可包含浮动子元素；3. 添加额外clear元素，不推荐，增加无意义DOM；4. 采用Flex或Grid布局替代浮动，布局更优。推荐优先使用display: flow-root或flex，老项目可用clearfix。
在CSS中，浮动元素会脱离文档流，导致父容器无法正确感知其高度，从而出现高度塌陷问题。解决这个问题有几种常用方法，下面介绍最实用的几种方案。
1. 使用伪类clearfix
这是最常见且兼容性好的做法，通过给父容器添加一个清除浮动的类来修复塌陷。
具体实现方式是在CSS中定义一个clearfix类：
.clearfix::after {
content: "";
display: table;
clear: both;
}
然后将这个类应用到包含浮动元素的父容器上：
立即学习“前端免费学习笔记（深入）”；
左侧内容右侧内容
这样父元素就能包含住所有浮动子元素，避免高度塌陷。
2. 触发BFC（块级格式化上下文）
BFC元素可以包含内部的浮动元素。可以通过以下CSS属性之一触发BFC：
- overflow: hidden 或 auto
- display: flow-root（推荐现代写法）
- float: left/right（不常用，会影响布局）
- position: absolute/fixed（脱离文档流，慎用）
推荐使用 display: flow-root，它专为包含浮动而设计，不影响其他样式：
.container {
display: flow-root;
}
3. 使用额外的清除元素（不推荐）
在浮动元素末尾添加一个空元素并设置clear: both：
内容
这种方法会增加无意义的DOM元素，不利于维护，已逐渐被淘汰。
4. Flex或Grid布局替代浮动
现代布局更推荐使用Flexbox或Grid来代替传统浮动布局。
例如使用Flex：
.container {
display: flex;
}
Flex容器天然包含子项，不会出现高度塌陷，代码更简洁清晰。
基本上就这些方法。日常开发中推荐优先使用 display: flow-root 或 flex布局，既语义清晰又无需额外标签。老项目可用clearfix保证兼容性。关键是理解原理，按需选择。
