浮动元素重叠源于父容器高度塌陷，因浮动子元素脱离文档流致父容器高度为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，整个区块就可能垮掉。现代布局方案不是更“高级”，而是把这类隐式依赖显式化、自动化了。