应放弃浮动布局，改用CSS Columns、原生Masonry或Flex+JS轻量方案；Columns适合等宽图集，Masonry实现真正瀑布流，Flex+JS适配老旧浏览器。
浮动（float）布局在图片墙场景中容易导致容器高度塌陷、子项排列错乱、底部留白不均等问题，根本原因是浮动元素脱离文档流，父容器无法自动包裹其高度。直接清除浮动（如 clear: both）只能缓解塌陷，无法解决多行高度不齐带来的视觉割裂。更可靠的解法是放弃 float，改用现代 CSS 布局方案。
用 CSS Columns 实现等宽分栏 + break-inside 防断行
适合图片宽度统一、数量较多、对垂直顺序敏感的场景（如博客图集、产品缩略图）。columns 天然按列流式填充，配合 break-inside: avoid 可防止单张图片被切到两列之间。
- 给容器设置
column-count: 3（或column-width: 250px）控制列数/宽度 - 给图片（或图片外层 item）加
break-inside: avoid，确保整张图落在同一列 - 移除所有 float、margin-bottom 模拟间隙，改用
column-gap: 16px - 注意：图片需设
width: 100%以自适应列宽，高度由 aspect-ratio 或 height:auto 保持比例
用 Masonry 布局（原生支持逐步落地）
CSS display: grid + grid-template-rows: masonry 是真正的瀑布流解决方案，目前 Chrome 116+、Edge 116+ 已原生支持（Firefox 和 Safari 尚未跟进，需 JS 回退）。
- 容器设
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) - 关键一步：添加
grid-template-rows: masonry，浏览器自动按高度最小列插入下一项 - 为兼容旧版，可检测支持性：
@supports (grid-template-rows: masonry)写原生样式，否则降级为 columns 或 JS Masonry 库 - 无需固定图片高度，不同比例图片自然错落，视觉节奏更自然
轻量回退：Flex + JS 简易 Masonry 行高对齐
当必须兼容老浏览器且不愿引入大型库时，可用 Flex 布局 + 少量 JS 计算每行最大高度并统一拉伸。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构保持语义化，图片包在
- CSS 设
display: flex; flex-wrap: wrap，子项flex: 0 0 calc(33.333% - 16px)（三列） - JS 遍历所有子项，按实际 top 值分组为“行”，取每行最大高度，再将该行所有子项设为
height: maxH - 比纯 CSS 方案稍重，但比完整 Masonry 库更轻，适合几十张图以内的页面
基本上就这些。优先尝试 CSS Columns（兼容性好、零 JS），有新浏览器要求再上 Masonry；若项目受限于 IE 或低版本移动端，再考虑轻量 JS 对齐。浮动布局在图片墙中已过时，切换成本不高，效果提升明显。
