浮动闭合无法解决瀑布流错位，因float按文档顺序贴边排列、不比较列高；display: flow-root是稳妥的bfc创建方式，需每层卡片组单独设置。
浮动闭合不是解决瀑布流错位的关键
用 float 做“瀑布流”时，clear: both 或 ::after 清除浮动，只能防止父容器塌陷，完全无法解决第二行卡片嵌入高卡片右侧空白的错位问题。这是 float 的渲染机制决定的：它不比较列高，只按文档顺序贴边排列。
display: flow-root 是当前最稳妥的浮动容器收口方式
如果你必须保留 float 卡片结构（比如维护老项目），父容器必须形成 BFC 才能包裹住所有浮动项的高度。推荐写法：
-
.card-container { display: flow-root; }—— 无裁剪副作用，不干扰box-shadow、下拉菜单等溢出内容 - 避免
overflow: hidden：iOS Safari 旧版可能意外触发滚动条，且会裁掉真实需要显示的溢出元素 - 多层卡片组（如“热门”“最新”“推荐”）需每层都加
display: flow-root，不能只在最外层设一次
真正让不同高度卡片“看起来对齐”的视觉技巧
浮动本身不提供底部对齐能力，但可通过内容控制实现视觉一致：
- 给图片容器统一设
aspect-ratio: 4/3（iOS 15.4+/Chrome 101+ 支持良好），配合object-fit: cover - 对文字内容短的卡片，用
padding-bottom补足到基准线，前提是全局已设* { box-sizing: border-box; } - 禁用图片默认 inline 间隙：
img { display: block; }，避免因基线对齐引入额外空白
为什么你不该再为浮动瀑布流调 clear 和 calc
你看到的“错位”，不是因为你没写对 clear，而是你在用图文环绕工具做二维布局。现代浏览器已全面支持：
-
column-count: 3+column-gap: 16px—— 浏览器原生按列分配，无需 JS，但 DOM 顺序与视觉顺序不一致 -
display: grid+grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))—— 等宽响应式，高度错落自然 - 真瀑布流必须靠 JS：Masonry 或 CSS Grid Lanes（2026 年起部分 Chromium 和 Safari 技术预览版已支持）
最容易被忽略的是：图片加载完成前高度为 0，浮动布局会临时崩塌——这问题在 flow-root 或 grid 下同样存在，但后者至少不会让后续卡片“卡进腰部”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
