clear: both对卡片高度对齐完全无效，因其仅使自身下移避开浮动元素，不改变浮动子项高度计算逻辑，无法解决“圣杯错位”；真正有效的是display: flow-root、clearfix伪元素或min-height兜底。
清除浮动本身不能保证卡片高度一致，它只解决父容器塌陷问题；高度不一致是浮动机制的固有表现，必须配合其他手段干预。
为什么clear: both对卡片高度对齐完全无效
clear: both 的作用是让某个元素“下移到所有浮动元素下方”，它只影响该元素自身的位置，不改变浮动子项的高度计算逻辑。卡片之间高度差异依然存在，后续卡片仍会嵌入高卡片下方的空白区——这就是所谓“圣杯错位”。常见错误是给最后一张卡片加 clear: both，这只会把它单独压到下一行，整行布局反而更乱。
- 浮动元素脱离文档流，彼此高度互不可见
-
clear不触发重排，也不拉齐底部或顶部 - 试图用
vertical-align对浮动元素生效？它根本不起作用
真正能缓解高度错位的三种做法
不是“修复”，而是绕过浮动在高度对齐上的先天缺陷：
- 给卡片容器加
display: flow-root（推荐）：比overflow: hidden安全，不裁剪box-shadow或下拉菜单，现代浏览器全覆盖 - 用伪元素
.clearfix::after强制父容器撑高：必须含三要素 ——content: ""、display: table、clear: both，缺一不可 - 对卡片统一设
min-height：值取内容最大可能高度（比如min-height: 200px），保留弹性空间，避免内容溢出被截断
图片加载前高度为0，临时错位怎么防
这是最容易被忽略的动态场景：卡片里 <img> 还没加载完时高度为 0，导致整行卡片瞬间塌陷、错位，等图片加载完成才跳回正常位置。这不是 CSS 能完全控制的，需前置兜底：
- 给
<img>加aspect-ratio: 16 / 9（支持 Chrome 88+/Firefox 89+） - 降级方案：设
min-height+background-color占位，或用height: 0; padding-bottom: 56.25%配合position: relative内部绝对定位图片 - 避免依赖 JS 等待
load事件再布局——用户滚动快时仍会闪现错位
浮动布局中谈“高度一致性”本质是个伪命题；它能做的只是让容器不塌、让换行可控。真要对齐底部、统一视觉节奏，display: flex 的 align-items: flex-end 或 display: grid 才是正解。但若必须用 float，就别幻想靠 clear 解决高度问题——那是把胶带当钢筋用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
