浮动无法实现真正瀑布流，因其按文档流顺序贴边排列而非按列底部对齐，导致卡片卡位错列；display: flow-root仅解决父容器塌陷，不改变浮动排列逻辑；应改用column-count或grid布局。
纯 CSS 浮动无法修复瀑布流断裂——它根本不是断裂，而是设计局限；所谓“浮动瀑布流”从一开始就是视觉欺骗，真要卡片不卡位、不断层，必须换 layout 模型。
为什么 float 会让卡片在中间突然断开、错列
浮动元素只看前一个同向浮动元素的底部位置，不会主动寻找当前各列最低处插入。结果就是：第二列第一个卡片被第一列较短卡片“卡住”，下方大片留白，看起来像“断裂”。这不是渲染 bug，是 CSS 浮动规范行为。
-
float: left+width: 240px只能控制“每行放几个”，不能控制“落到哪一列底部” - 图片异步加载完成瞬间高度突变，浮动不感知，导致后续卡片全部错位重排
- resize 触发重排时，列宽微调（比如 768.3px → 767.9px），可能让某张卡片刚好被挤到下一行，视觉上就是“断层”
display: flow-root 能撑高父容器，但治不了断裂
display: flow-root 解决的是父容器高度塌陷问题，让背景、边框、后续元素正常渲染，但它不改变浮动本身的排列逻辑。卡片依然按文档流顺序左对齐堆叠，该卡住还是卡住。
- 加了
display: flow-root后，.waterfall高度正常了，但内部卡片错位没改善 - 它和
overflow: hidden一样，只是让容器“看得见”，不是让布局“算得对” - 若你同时用了
margin-bottom和clear: both混搭，反而会放大错位感
真正可用的替代方案：column-count 或 grid-lanes
现代浏览器已支持两种真正按列分配内容的原生方案，无需 JS，无错位风险。
- 用
column-count：适合高度差异大、内容以文本/图文混排为主的卡片，配合break-inside: avoid防截断 - 用
display: grid-lanes（Chrome 128+/Firefox 125+/Safari 17.5+）：三行代码实现“车道式”自动填充，卡片永远落入最短列，才是语义上的瀑布流 - 退而求其次用
display: grid+grid-auto-flow: dense：虽非严格瀑布流，但在多数响应式场景中视觉误差极小
如果必须硬用浮动，最小可行约束有哪些
放弃“动态适配”和“真实瀑布流”，只做静态、可控场景：
- 所有卡片高度必须预设或锁定：
height: 320px或aspect-ratio: 4/3，禁用min-height或内容驱动高度 - 父容器宽度固定（如
max-width: 1200px），禁用width: 100vw或 fluid 容器 - 列数靠手算：
columnCount = floor((containerWidth - padding) / (itemWidth + gap))，然后用:nth-child(3n)清掉最后一列margin-right - 图片必须带
loading="eager"或内联height/width，否则加载完成瞬间必然断裂
最容易被忽略的一点：你调试时看到的“修复成功”，往往只是在特定视口宽度 + 特定图片加载顺序下的巧合；只要用户缩放页面、切后台再切回、或网络延迟波动，断裂就会重现——这不是样式没写对，而是模型选错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
