浮动无法实现真正的瀑布流，因其按文档流顺序靠拢而非列底对齐；必须定宽、触发BFC、预设高度，否则错位；现代推荐CSS Grid或column-count，JS场景用Masonry。
浮动实现瀑布流为什么总错位
浮动本身不支持“按列排序”，它只按文档流顺序逐个向左/右靠拢，遇到容器边界才换行。所以用 float: left 堆多个高度不一的卡片时，第二行第一个元素会卡在第一行最短项的右侧，而不是“落到第一列底部”——这根本不是瀑布流，是视觉错觉下的混乱堆叠。
常见错误现象：margin-bottom 没清干净导致间隙错乱；父容器没触发 BFC，浮动溢出看不见；图片加载慢造成高度塌陷，后续元素提前占位。
- 必须给父容器加
overflow: hidden或display: flow-root来形成 BFC，否则浮动会脱离父级上下文 - 每个子项需设固定宽度（如
width: 240px），不能用百分比或flex混用 - 所有子项高度必须可预测（避免图片异步加载未完成就渲染），否则布局会重排、错位
- 不要依赖
clear: both清浮动来“模拟列底对齐”，它只会让整行断开，无法实现真正的列式下落
定宽 + 浮动的最小可行写法
真要硬上浮动方案，核心就两点：宽度锁死、容器收住。别碰自适应列数，也别试图用 JS 补高——那已经脱离纯 CSS 浮动范畴了。
示例结构：
立即学习“前端免费学习笔记（深入）”；
.waterfall { overflow: hidden; }
.waterfall .item { float: left; width: 240px; margin-right: 16px; margin-bottom: 16px; }注意：margin-right 是为了列间留空，但最后一列必须用 :nth-child(3n) 清掉，否则会挤出容器；margin-bottom 统一由子项承担，父容器不设 padding。
- 列数 =
floor((containerWidth - padding) / (itemWidth + marginRight))，得手算，不能响应式自动变 - 移动端需用媒体查询重设
width和margin，否则小屏直接溢出 - IE8+ 能跑，但 Safari 旧版对
float和margin-collapse处理不一致，容易多出空隙
比浮动更靠谱的替代方案有哪些
浮动瀑布流本质是 hack，现代项目里真没必要扛着兼容性包袱硬刚。CSS 多列（column-count）和 CSS Grid（grid-template-columns + grid-auto-flow: dense）才是正解。
-
column-count兼容性好（IE10+），但内容是按“文本流切片”，不能控制单个块的跨列，也不支持 gap 精确对齐 -
grid方案中，grid-auto-rows: 1fr不起作用，必须靠grid-row-end: span N手动指定高度跨度，否则还是平铺 - 若需 JS 控制（比如无限滚动+动态插入），Masonry 库比自己调浮动可靠得多，它用绝对定位模拟列队列，不依赖 float
浮动瀑布流上线前必查的三个点
哪怕只是临时方案，这几个地方一漏，页面就 visibly broken。
- 检查所有
img是否有height或aspect-ratio，否则加载中高度为 0，后续浮动全乱 - 确认父容器没有
zoom、transform或will-change，这些可能意外破坏 BFC 触发条件 - 用 DevTools 强制刷新并禁用缓存，看首次加载时是否出现“先堆成一列、再突然跳散”的重排闪动——那是高度未预设的铁证
浮动堆不出真正的瀑布流，它只是把错位控制在可接受范围内的权宜之计。真要列底对齐，就得放弃 float，直奔 grid 或 JS 方案。这点没法取巧。
