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

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

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

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

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

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

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

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• 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 或伪元素清除，只会浪费时间——该换布局模型了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！