纯float无法实现真正瀑布流，因其按文档流顺序排列，无法自动落入高度最小列的空隙；CSS columns虽可视觉模拟但会截断元素；现代推荐grid+masonry或服务端分列渲染。
float实现多列瀑布流为什么行不通
纯float无法实现真正意义上的瀑布流，因为浮动元素按文档流顺序逐个排列，所有列高度不一致时，后续元素只能贴着「当前列最下方」或「前一列底部」对齐，无法自动落入高度最小的那列空隙中。你看到的“多列浮动效果”，其实是等高分栏（类似column-count），不是内容动态落位的瀑布流。
用CSS columns做视觉瀑布流最简单但有硬伤
column-count或column-width能快速切出多列、内容自动分段流动，视觉上接近瀑布流，但它把单个块级元素（如div）劈开分页——图片、卡片会被截断，且无法控制某一项完整落在哪一列。
- 适用场景：纯文字新闻列表、无需交互的静态内容
- 常见错误：给
column容器设display: flex或align-items，这会直接禁用多列布局 - 兼容性：Chrome 50+、Firefox 52+、Safari 10.1+ 支持，IE10+仅支持
column-count基础用法
JS辅助+float容器是唯一能用float“模拟”瀑布流的方式
如果必须用float打底（比如老项目不能改结构），就得靠JS计算每列当前高度，把下一项插入到最短列末尾。此时float只起左对齐作用，实际布局逻辑完全由JS接管。
- 关键点：每个列容器必须是独立
div，设float: left+ 固定宽度，不能用float直接包裹卡片项 - 容易踩的坑：
margin和border没包含在列宽计算里，导致最后一列换行错位 - 性能影响：每次插入都要遍历所有列高度，100+项时明显卡顿；建议配合
documentFragment批量插入
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="waterfall"> <div class="col" style="float:left; width:240px;"></div> <div class="col" style="float:left; width:240px;"></div> <div class="col" style="float:left; width:240px;"></div> </div>
现代方案早该放弃float，改用grid或masonry
CSS grid本身不支持瀑布流（grid-auto-flow: dense只优化空隙，不改变高度排序），但display: grid + grid-template-rows: masonry已在Chrome 116+启用（需chrome://flags/#enable-css-masonry-layout开启）。更稳妥的是用column-count配break-inside: avoid防截断，或直接上Masonry JS库（Google官方维护，API极简）。
别在float上反复调参数了——它从设计之初就没打算干这事。真实项目里，只要后端能按列分好数据，服务端模板渲染多列容器，比任何客户端JS模拟都稳。
