页面缩放时浮动列表出现重叠，常见于卡片列表和导航菜单。列表项使用 float 布局后，宽度往往被固定为像素值，当视口变窄或浏览器缩放到较小比例，一行之内放不下这些项目，浮动元素虽然会换行，但父容器没有及时清除浮动，或者项目内部图片与文字被压缩到极限，就会出现视觉上的叠压。解决思路不是继续增加清除浮动规则，而是把布局模型换成 flex 或 grid，并给每个列表项设置 min-width，让浏览器在空间不足时主动换行，而不是继续压缩内容。
浮动列表重叠的根本原因
float 元素会脱离正常文档流，虽然父容器通过 overflow:hidden 可以清除浮动，但列表项本身的宽度规则仍然比较僵硬。比如一个横向列表里每个 <li> 设置 width:200px，容器宽度从 900px 缩放到 500px 时，第一行只能容纳两个，第三个浮动项会掉到第二行。如果此时列表项内部还有图片、长串 URL 或不换行的文本，内容会溢出自己的盒子，和旁边的项目视觉上重叠。这种情况在缩放到 80% 或 75% 时尤其明显，因为整数像素取整让百分比宽度产生误差，float 又不会像 flex 那样重新分配剩余空间。
另一个容易忽略的因素是盒子模型。如果全局没有设置 box-sizing:border-box，给列表项加 padding 或 border 后，实际占用宽度会大于声明的 width。缩放过程会放大这些小误差，多出一两像素就可能把本应换行的项目挤进同一行，进而出现重叠。float 布局缺乏自动计算剩余宽度的能力，所以修复时要同时处理宽度约束和盒子模型。
用 flex-wrap 替代 float 并设置 min-width
把 float 列表迁移到 flex 是最直接的方案。父容器设置 display:flex 和 flex-wrap:wrap，子项不再需要 float:left。接着给每个项目设置 flex:1 1 200px 和 min-width:200px。这里的 flex-basis 200px 表示基准宽度，flex-grow 为 1 表示有多余空间时可以拉伸，flex-shrink 为 1 表示允许收缩。min-width:200px 则划出底线：即使空间不足，项目宽度也不能低于 200px，因此浏览器只能选择换行，而不是把项目压扁到内容互相覆盖。
.float-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
list-style: none;
padding: 0;
margin: 0;
}
.float-item {
flex: 1 1 200px;
min-width: 200px;
box-sizing: border-box;
padding: 16px;
background: #f5f7fa;
border: 1px solid #e0e4e8;
}
flex-wrap:wrap 是关键，它允许项目在容器宽度不足时换到下一行。gap 替代原来的 margin-right，避免最后一个项目右侧多出空隙。min-width 设置为 200px 后，如果容器宽度只剩 400px 到 599px，一行只能放一个或两个项目，剩余空间由 flex-grow 分配给当前行项目。这样缩放时项目之间的间距均匀，也不会出现重叠。注意 min-width 的值不要超过容器的最小可能宽度，否则在手机屏幕上仍然会出现横向溢出。
如果原来的列表项内部有长文本，还需要给项目加上 min-width:0 或 overflow-wrap:anywhere，否则 flex 子项默认 min-width 为 auto，不会收缩到比内容更小，长单词或长链接仍然会撑破卡片。实践中常在卡片内层再包一个 .item-body 并设置 min-width:0。
用 grid 的 auto-fit 和 minmax 自动计算列数
如果列表项是等宽卡片，grid 布局会比 flex 更省心。父容器使用 display:grid，然后设置 grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))。浏览器会根据容器宽度自动计算能容纳多少列：每列至少 200px，空间多时列宽按 1fr 均分。缩放页面时列数动态变化，任何情况下都不会把卡片压到 200px 以下，项目之间自然不会重叠。
.grid-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
list-style: none;
padding: 0;
margin: 0;
}
.grid-item {
min-width: 0;
box-sizing: border-box;
padding: 16px;
background: #f5f7fa;
border: 1px solid #e0e4e8;
}
这里的 minmax(200px, 1fr) 是核心：200px 是最小列宽，1fr 是最大弹性。auto-fit 会在空间足够时创建更多空轨道，已经放入的项目可以继续伸展；如果希望空轨道也保留占位，可以用 auto-fill。对大多数内容流式卡片，auto-fit 视觉上更饱满。项目上的 min-width:0 同样必要，它覆盖了 grid 子项默认的 auto 最小宽度，让长文本可以正确换行，而不是撑破列宽。
grid 方案尤其适合需要同时控制行和列的仪表盘、商品列表、相册展示。传统 float 要计算百分比还要处理清除浮动，grid 直接把列数交给浏览器计算。相比 flex，grid 的每个列轨道宽度一致，不会出现最后一行项目被拉伸得很宽的情况。如果你希望最后一行项目保持与其他行相同的宽度，可以设置 grid-auto-flow:row 并使用固定列，或者用 flex 并给项目固定 flex-basis，不要 flex-grow。
迁移中需要注意的细节
不论选择 flex 还是 grid，先确保全局盒模型设置正确，例如 * { box-sizing: border-box; }，这样 padding 和 border 不会额外增加列表项的实际尺寸，min-width 计算才准确。如果项目里包含 <img>，给 <img> 设置 max-width:100% 和 display:block，避免图片在缩放时保持原始宽度把容器撑开。对于 URL、邮箱等长字符串，可以添加 overflow-wrap:break-word。
从 float 迁移时，先移除 float:left 和对应的清除浮动规则。父容器的 overflow:hidden 如果继续保留，在 flex 或 grid 下通常没有副作用，但某些场景会裁剪阴影，建议移除。原来的 margin-right 用 gap 替代，兼容现代浏览器已经很好；如果必须兼容较旧浏览器，可以用 margin 配合 :not(:last-child) 来模拟间距，但现代项目不必为此牺牲代码简洁性。
测试时不要只拖拽浏览器宽度，还要使用浏览器的缩放功能在 75%、80%、110% 等比例下检查。缩放会触发像素取整和媒体查询变化，是暴露重叠问题的最佳场景。可以给列表项加一个临时背景色，观察每个项目的实际占用范围。若仍有重叠，检查是否有其他样式强制设置了 width、white-space:nowrap 或 position:absolute，这些规则会绕过 flex/grid 的正常布局。