float导致后续元素重叠是因为浮动元素脱离文档流使父容器高度塌陷；清除方法首选display: flow-root（现代标准），次选overflow: hidden（兼容性好），老旧项目可用伪元素clearfix。
为什么 float 会导致后续元素重叠或错位
当子元素使用 float: left 或 float: right 后，它会脱离普通文档流，父容器无法自动感知其高度，导致父容器高度塌陷。此时紧随其后的兄弟元素就会“上浮”到父容器的顶部空白处，看起来像重叠或错位。
这不是浏览器 bug，而是 float 的原始设计行为——用于文字环绕图片等场景。但现代布局中误用它做布局，就容易触发这类问题。
最稳妥的清除浮动方法：overflow: hidden（配合触发 BFC）
给浮动元素的**直接父容器**设置 overflow: hidden（或 overflow: auto），可强制该容器生成 BFC（块级格式化上下文），从而包含内部浮动子元素的高度。
- 兼容性好，IE6+ 都支持
- 无需额外 HTML 元素，不污染语义结构
- 注意：若父容器本身需要显示溢出内容（比如横向滚动），则不能用此法
.container {
overflow: hidden; /* 触发 BFC，包裹浮动子项 */
}
.container .item {
float: left;
width: 200px;
}更现代、更可控的替代方案：display: flow-root
display: flow-root 是专为解决此问题而生的 CSS 值，它显式创建一个 BFC 容器，且**不影响溢出行为**（不像 overflow 可能隐藏内容或添加滚动条）。
立即学习“前端免费学习笔记（深入）”；
- Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 支持
- 比
overflow: hidden更语义清晰、副作用更小 - 不支持旧版 IE，如需兼容 IE，需回退到
overflow或伪元素法
.container {
display: flow-root; /* 推荐用于现代项目 */
}
.container .item {
float: left;
}老项目兜底方案：伪元素清除（::after）
在父容器末尾插入一个清除浮动的伪元素，是最经典的“clearfix”写法，兼容 IE6+，适合维护老旧代码库。
- 必须同时设置
content: ""、display: table（或block）、clear: both - 避免用
visibility: hidden或height: 0单独清除，可能失效 - 注意伪元素默认是 inline，
display: table能确保它正确撑开并清除浮动
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* 使用时加在父容器上 */
.container {
*zoom: 1; /* IE6/7 hack，触发 hasLayout */
}
.container::after {
content: "";
display: table;
clear: both;
}清除浮动的本质不是“删掉 float”，而是让父容器重新获得对浮动子元素的尺寸感知能力。选哪种方式，取决于你的浏览器支持范围和是否允许副作用——flow-root 最干净，overflow: hidden 最通用，伪元素最兼容。别在子元素上瞎加 clear，那只会让布局更难预测。
