当使用 float 进行CSS布局时，浮动元素会脱离文档流，导致其父容器无法正确感知高度，从而发生父容器塌陷。为避免这一问题，有几种常用的清除浮动技巧。
1. 使用 clear 属性清除浮动
在浮动元素的末尾添加一个空元素，并设置 clear: both 来闭合浮动：
HTML 示例：左浮动右浮动
CSS 样式：
.clearfix {
clear: both;
}这种方法简单直接，但需要额外的DOM元素，不够语义化。
立即学习“前端免费学习笔记（深入）”；
2. 使用伪元素清除浮动（推荐）
通过 ::after 伪元素在容器末尾插入内容并清除浮动，无需额外标签：
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1; / 兼容IE6/7 /
}
将 clearfix 类应用到包含浮动元素的父容器上即可防止塌陷。
3. 使用 overflow 触发BFC
给父容器设置 overflow: hidden 或 auto 可以触发BFC（块级格式化上下文），从而包含内部浮动元素：
.container {
overflow: hidden; /* 或 overflow: auto */
}优点是代码简洁，但需注意可能裁剪内容或出现滚动条，使用时要确保容器内无定位溢出元素。
4. 使用 display: flow-root（现代方法）
这是最新的标准方案，创建新的块级格式化上下文来包含浮动：
.container {
display: flow-root;
}兼容性较好（支持现代浏览器），语义清晰，无需伪元素或溢出控制，推荐用于新项目。
基本上就这些常用方法。选择哪种取决于项目兼容性要求和编码习惯。伪元素法最通用，flow-root 更现代简洁。
