浮动元素重叠源于父容器高度塌陷，因浮动子元素脱离文档流致父容器高度为0；清除方式有clear:both（需块级后续元素）、clearfix伪元素（最稳妥）和overflow:hidden（会裁剪溢出内容）；推荐用flex或grid替代float布局，因其天然规避塌陷、语义清晰、响应式友好。
浮动元素重叠是因为父容器高度塌陷
当子元素使用 float: left 或 float: right，它们会脱离文档流，导致父容器无法感知子元素高度，计算出的高度为 0。后续兄弟元素就会“上浮”到父容器顶部，看起来像重叠了——实际是父容器没撑开，内容层叠在了一起。
清除浮动的三种常用方式及其适用场景
不是所有清除方式都等效，选错会影响布局结构或带来额外副作用：
-
clear: both必须加在浮动元素之后的**块级元素**上，且该元素需独占一行；单独对浮动元素自身设clear无效 -
::after伪元素清除（clearfix）最稳妥：给父容器加类，用content: ""+display: table或display: block+clear: both -
overflow: hidden能触发 BFC，间接撑开父容器，但会裁剪溢出内容（比如下拉菜单、阴影、定位偏移），慎用于有交互区域的容器
.clearfix::after {
content: "";
display: table;
clear: both;
}
为什么推荐优先用 flex 或 grid 替代 float 布局
浮动本就不是为整体布局设计的，而是为文字环绕图片这类场景服务的。用它做多列布局，本质是“hack”，维护成本高、响应式难处理、语义差：
-
display: flex父容器一行声明即可控制子项排列、对齐、换行，无需关心浮动方向和清除逻辑 -
display: grid更适合二维布局（行列同时控制），比如卡片网格、表单分组，grid-template-columns直接定义列宽，无塌陷问题 - flex/grid 天然支持
gap、justify-content、align-items等现代属性，而 float 需要额外 margin/padding 模拟间距，易出错
旧项目中浮动未清除导致重叠的快速诊断方法
打开浏览器开发者工具，选中疑似塌陷的父容器，看右侧“Computed”面板中的 height 是否为 0px 或远小于预期；再检查其子元素是否都有 float: left/right 且无后续清除元素：
立即学习“前端免费学习笔记（深入）”；
- 如果父容器高度正常，但视觉上仍重叠 → 检查
margin-collapse或position: absolute干扰 - 如果用了
clear: both但无效 → 确认该元素是否被display: inline或float自身影响，必须是块级且在浮动流之后 - 移动端出现重叠而 PC 正常 → 很可能是媒体查询里漏写了 clearfix 或 flex 回退逻辑
浮动布局的坑不在写法本身，而在它要求你时刻记住“谁脱离了流、谁需要收尾、谁会被挤上去”。一旦漏掉一个 clear，或者某个新插入的元素没加 class，整个区块就可能垮掉。现代布局方案不是更“高级”，而是把这类隐式依赖显式化、自动化了。
