浮动元素高度不一致导致换行时基准线错乱，使下一行元素卡在最高项底部；统一容器高度+vertical-align可临时修复，但根治方案是改用CSS Grid布局。
多个 div 浮动后换行错位，根本不是“没清浮动”这么简单——而是浮动元素高度不一致，导致后续行的起始基准线错乱。直接加 clear: both 只能防塌陷，压不住错位。
为什么 float 左浮后第二行会往上顶？
浏览器对浮动元素的换行逻辑是：当一行放不下下一个浮动项时，它会从“上一行中最低的那个浮动元素底部”开始找水平空间。如果某个 div 高度远大于同排其他项（比如图文混排时图片高、文字少），下一行第一个元素就会卡在它的“脚脖子”位置，造成视觉错位。
常见错误现象：
- 三列布局，中间列内容多、高度高，右边列被顶到中间列腰部位置
- 响应式网格中，某张图加载慢或尺寸异常，整行对齐崩掉
- 用
float: left做卡片列表，标题行数不一，底部参差不齐
统一容器高度 + vertical-align 是最轻量的修复
不改布局模型，只约束视觉表现。适用于必须兼容 IE8–9 或临时 patch 的场景。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给每个浮动
div外层套一个固定高容器（如height: 200px），内部用overflow: hidden截断超长内容 - 所有浮动项统一设
vertical-align: top（虽然float元素本身忽略该属性，但对其父容器生效时可稳定基线） - 若内容需居中，改用
display: flex; align-items: center;在容器内布局，而非依赖vertical-align - 避免仅靠
min-height—— 它不阻止换行错位，只防止容器塌得过矮
clearfix 伪元素只能防塌陷，不能修错位
很多人以为加了 .clearfix::after 就万事大吉，其实它只解决父容器高度坍缩问题，对浮动项之间的垂直对齐毫无作用。
典型误用：
- 给父容器加
overflow: hidden或display: flow-root→ 父容器高度正常了，但子项换行依然歪 - 在每行末尾硬插
<div style="clear: both"></div>→ 强制换行，但无法保证每行高度一致，响应式下极易断裂 - 混用
float: left和float: right→ 行为不可预测，错位更难调试
真正起效的清除，是配合高度控制一起用：先让每项“站得一样高”，再用 clearfix 收尾，否则只是掩耳盗铃。
别硬扛 float，用 display: grid 替代才是根治方案
浮动本为文字环绕设计，不是为多列网格而生。现代项目里继续用 float 做布局，等于主动给自己埋坑。
推荐写法：
- 父容器设
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)))); gap: 12px; - 每个子
div不设float，直接作为 grid item；可配aspect-ratio: 4/3或固定容器 +object-fit控制图片 - 需要等高卡片？加
align-items: stretch（默认值），grid 天然拉齐 - 旧项目迁移？只需删掉所有
float和clear相关样式，替换为上述 grid 规则，几乎零风险
错位问题背后，其实是布局模型选错了。float 的“浮动”语义和“换行对齐”需求天然冲突——这点容易被忽略，但恰恰是所有补救措施失效的根源。
