浮动卡片参差不齐是因为float本为图文环绕设计，不参与高度对齐，高卡片右侧留白会使后续卡片上浮嵌入，导致错行、底部不齐；需用display: flow-root解决塌陷，或直接改用flex/grid布局。
为什么浮动卡片会参差不齐
浮动元素按文档流顺序贴边排列，但不参与高度对齐计算。当某张卡片内容多、高度大时，下一张卡片不会“等它到底”，而是直接嵌入其右侧剩余空白区——这导致视觉上错行、底部不齐、序号断裂。这不是渲染 bug，是 float 的原始设计逻辑：它本为图文环绕服务，不是布局工具。
常见现象包括：
- 第二行第一张卡“卡”在第一行高卡的腰部位置
- margin-bottom 在部分卡片上失效
- 响应式缩放后错位突然加剧
- 父容器高度为 0，后续内容叠上来
用 display: flow-root 快速稳住父容器 父容器塌陷是错位放大的放大器。先让它“看见”所有浮动子项，再谈对齐。
推荐写法：
- ul 或 .card-list 直接加 display: flow-root
- 它比 overflow: hidden 更安全：不裁剪 box-shadow、不干扰下拉菜单、无重绘抖动
- Chrome 58+ / Firefox 53+ / Safari 10.1+ 全支持，2026 年已无兼容顾虑
避免踩坑：
- 不要用 overflow: auto：旧版 Safari 可能意外出滚动条
- 别只给最外层加，多级卡片组（如“热门”“推荐”“最新”）每层都得独立触发 BFC
- position: relative 也能触发 BFC，但语义不清，不如 flow-root 直观
改用 flex-wrap + gap 彻底绕过浮动陷阱
你花一小时调 clear、calc()、vertical-align，不如三行 CSS 切换布局模型。
实操建议：
- 父容器设 display: flex 和 flex-wrap: wrap
- 用 gap: 16px 统一控制行列间距，不用手动算 margin
- 卡片设 flex: 1 1 calc(33.333% - 16px) 或更稳妥的 min-width: 280px
- 高度不一？align-items: stretch 默认拉齐，或加 height: 100% + object-fit 控制图片
注意细节：
- HTML 中卡片之间换行/空格不再影响布局
- :last-child 清除 margin 的逻辑彻底失效（也不再需要）
- gap 在 Flex 中支持 Chrome 104+ / Firefox 103+ / Safari 14.1+，当前主流环境全覆盖
如果必须保留 float，怎么最小化错位 仅限维护老项目、需兼容 IE11 或极简静态页场景。
关键动作：
- 全局重置：* { box-sizing: border-box; }，否则 padding 和 border 会撑破百分比
- 宽度用 calc() 显式扣除间距：4 列、间隔 12px → width: calc((100% - 36px) / 4)
- HTML 中浮动卡片标签间**不能有换行或空格**，否则渲染器插入约 4px 间隙
- 图片加载前高度为 0，临时错位难避免；建议给 <img> 加 aspect-ratio: 16/9 或 min-height
真正容易被忽略的是：浮动错位从来不是因为你没写够 clear，而是你在用文字环绕机制强行做二维布局。工具错了，补丁越打越厚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
