float 不推荐用于相册网格布局，因其专为文字环绕设计，易致塌陷、响应断裂、对齐失控；现代应优先选用 grid、flex 或 columns。
float 在现代布局中已不推荐用于相册这类网格结构，它本质是为文字环绕图片设计的，强行用它做相册会触发浮动塌陷、响应式断裂、对齐不可控等问题——除非你明确要兼容 IE8 或维护一段老代码。
为什么 float 会导致相册布局“看起来对、实际错”
常见现象：div 容器高度塌陷（表现为背景色/边框消失）、最后一行项目换行错乱、不同尺寸图片导致行高不一致、clear: both 加错位置直接破坏流式排列。
根本原因：float 让元素脱离文档流，父容器无法感知子项高度；且 float 本身没有列数控制能力，全靠宽度计算和 box-sizing 配合，稍有误差就断行。
实操建议：
- 若必须用 float（如 legacy 系统），每行项目总宽度（含 margin/padding/border）必须严格 ≤ 100%，建议用
calc(33.333% - 20px)而非33% - 父容器必须触发 BFC，最简方式是加
overflow: hidden或display: flow-root - 所有图片统一设置
vertical-align: top，否则默认baseline会让底部留白
float 相册的最小可行代码结构
以下代码能跑通，但仅限演示原理，不要直接复制进新项目：
.album {
overflow: hidden; /* 触发BFC，防止塌陷 */
}
.album-item {
float: left;
width: calc(33.333% - 20px);
margin: 10px;
box-sizing: border-box;
}
.album-item img {
display: block;
width: 100%;
height: 200px;
object-fit: cover;
vertical-align: top;
}
注意：calc() 中的减法必须包含单位（如 20px），不能写成 -20；box-sizing: border-box 是必须项，否则 padding/margin 会撑出宽度。
比 float 更靠谱的三个替代方案
真实项目中应优先考虑：
-
display: grid：用grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))自动适配列数，无需计算宽度 -
display: flex+flex-wrap: wrap：配合flex-basis控制基础宽度，浏览器支持度已覆盖全部现代环境 - CSS
columns属性（多列布局）：适合瀑布流式相册，但项目垂直间距需用column-gap，且不支持 item 对齐控制
这些方案天然规避了浮动塌陷、清除浮动、行高错位等历史包袱，代码更短、可维护性更高。
真正难的不是让四张图排成一行，而是当用户上传一张超宽或超窄图时，布局是否依然稳定——float 在这点上极其脆弱，而 grid 和 flex 的 minmax / flex-basis 能主动约束范围。别在旧工具上浪费调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
