浮动无法实现真正瀑布流，因其按行排列且不维护列状态，导致列间大片空白；现代可靠方案是column-count或JavaScript库如Masonry。

浮动实现的“瀑布流”本质是伪瀑布流，它根本无法真正模拟多列高度自适应填充——大片空白是浮动机制的必然结果，不是写错样式。

float 无法实现真正的瀑布流布局

所谓“浮动瀑布流”，通常是给多个子项设 float: left 并配合固定宽度，期望它们像 Masonry 那样自动填满空隙。但浮动流只按行排列：第一行从左到右塞满，第二行从左到右再塞满……一旦某列元素特别高，它下方的空白就永远无法被后续元素填充。

• 浮动不维护列状态，没有“哪一列最短就塞进去”的逻辑
• 浏览器只计算当前行剩余空间，不会回溯前几行找空位
• 哪怕你用 margin-top: -100px 强行上拉，也会破坏文档流顺序，导致打印、屏幕阅读器、SEO 解析异常

为什么 clear 或 overflow 无法解决空白问题

clear: both 和 overflow: hidden 是为解决父容器塌陷设计的，对“列间空白”完全无效。它们既不改变浮动项的排列顺序，也不影响后续浮动项的起始位置。

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

• clear: both 只让某个块级元素“等所有前面浮动结束再渲染”，但它不拉高父容器，也不重排已浮动的兄弟项
• overflow: hidden 虽能闭合父容器高度，但右侧/底部的大片空白依然存在——因为那些空白本就是浮动规则允许的合法间隙
• 试图在每第 N 个元素加 clear: left 只会让布局强制换行，空白反而更规则、更难看

现代替代方案必须放弃 float

真瀑布流只有两个可靠选择：CSS column-count（文本流式）或 JavaScript 库（如 Masonry）。用 Flex/Grid 强行模拟，只会暴露更多缺陷。

立即学习“前端免费学习笔记（深入）”；

• column-count: 3 + column-gap 适合纯文字、图片卡片等简单内容，但无法控制单个 item 的跨列行为
• CSS grid-template-rows: masonry 仍属实验性（仅 Firefox 支持），不可用于生产环境
• 若必须动态高度+多列填充，直接上 Masonry 或 CSS Container Queries 配合 JS 计算，别硬套 float

浮动布局的空白不是 bug，是 spec 定义的行为。盯着 margin、line-height 或伪元素清除，只会浪费时间——该换布局模型了。