float无法实现真正瀑布流，因其按文档流线性排列、无列高感知与自动落位能力，仅能模拟多列并排；column-count是目前最接近零JS瀑布流的原生方案。
纯 CSS 浮动方案做不了真正的瀑布流——它只能做等高列布局，不是视觉错落的瀑布流。所谓“浮动瀑布流”是历史遗留误称，实际是多列浮动模拟列容器，高度自适应靠的是清除浮动，不是列高平衡。
为什么 float + width 不等于瀑布流
浮动本身不支持“按列填充到最短列”的行为。你写 float: left + width: 33.33%，浏览器只是把所有 .item 横向挨个排，遇到容器右边界就换行，结果是“Z 字形堆叠”，不是 Pinterest 那种每列独立生长的瀑布流。列高永远不一致，且无法自动避让空隙。
- 图片加载前高度为 0，浮动后突然撑开，造成严重跳动
- 小数像素（如 33.33% × 容器宽）四舍五入导致第三列强制换行
- 父容器不清理浮动 →
height: 0→ 背景消失、页脚上浮
如何让浮动容器高度自适应
核心是让父容器重新包含浮动子元素。现代写法首选 display: flow-root，它创建 BFC 且不裁剪溢出内容（比如 tooltip、下拉菜单）。
-
display: flow-root：Chrome 64+ / Firefox 58+ / Safari 15.4+ 支持，一行解决 -
overflow: hidden：兼容性更好，但会意外裁剪position: absolute子元素 -
::after { content: ""; display: table; clear: both; }：IE11 兼容必须，漏掉display: table或clear: both就失效
别用 overflow: auto —— 滚动条可能无故出现；也别依赖 height: 100%，它不解决塌陷，只掩盖问题。
立即学习“前端免费学习笔记（深入）”；
如果坚持用浮动，至少保证列宽稳定
用 calc() 替代百分比，避免小数像素误差：
.waterfall {
display: flow-root;
}
.item {
float: left;
width: calc(33.333% - 20px); /* 扣除左右 margin */
margin: 0 10px 15px;
box-sizing: border-box;
}
.item img {
width: 100%;
height: auto;
display: block;
}
- 固定列数时，
column-count比浮动更可靠，且原生支持内容按列分配 - 浮动布局中，
break-inside: avoid对img无效，别乱加 - 图片必须预设宽高比或服务端返回尺寸，否则加载完成前布局反复重排
真正该用什么替代浮动
如果你要的是“图片高度不一、列长不等、视觉错落”的效果，column-count 是唯一无需 JS 的纯 CSS 解法。它不依赖容器高度，不关心 DOM 顺序是否等于视觉顺序，且能自然处理异步加载。
- 禁用
display: flex或display: grid在父容器上，否则多列直接失效 -
break-inside: avoid必须加在子项（如.masonry-item）上，防止图片被截断 - Firefox 已默认支持
grid-template-rows: masonry，但 Chrome/Safari 仍需回退到column-count
浮动布局的“高度自适应”只是让父容器包裹住所有列，不是让各列高度一致——那从来就不是浮动的设计目标。真要列高平衡，就得上 JS，而一旦上 JS，浮动就彻底没存在必要了。
