根本原因是浮动塌陷和行框对齐逻辑差异；应统一宽度+清除浮动，或改用inline-block（font-size:0+vertical-align），最优解为flex布局（flex-wrap+gap）。
浮动列表项间距不一致，根本原因不是“有空格”或“写了margin”，而是浮动元素在换行、父容器宽度不足、内容高度不一等情况下，触发了 浮动塌陷 和 行框对齐逻辑差异，导致视觉间距错乱。单纯调 margin 往往治标不治本。
统一 width + 清除浮动（最稳妥的浮动方案）
确保所有浮动项宽度严格一致，并为父容器添加清除浮动，避免因高度不均引发的错位：
- 给
li或浮动子元素设置固定width（如width: 200px），禁用flex或inline类弹性行为 - 父
ul添加overflow: hidden或伪元素清除浮动（如::after { content:""; display:table; clear:both; }） - 统一设置
margin-right（最后一项用:last-child { margin-right: 0; }去掉）
改用 display: inline-block（免清除、更可控）
inline-block 天然保持文档流，不会塌陷，且支持 vertical-align 对齐，间距更可预测：
- 设
li { display: inline-block; vertical-align: top; }，避免基线对齐带来的底部空白 - 父
ul上设font-size: 0;消除 HTML 中换行/空格产生的 4px 间隙，子项再重设字体大小 - 用
margin控制左右间距，不再依赖浮动的“贴边”逻辑
现代推荐：直接用 flex 布局（一劳永逸）
如果兼容性允许（IE10+），放弃浮动，用 display: flex 是最简洁可靠的解法：
立即学习“前端免费学习笔记（深入）”；
-
ul { display: flex; flex-wrap: wrap; gap: 12px; }——gap精确控制项间距离，无视内容高度 -
li { flex: 0 0 200px; }控制单个宽度，自动换行不卡顿 - 无需清除、无塌陷、无对齐陷阱，代码少、维护强
基本上就这些。浮动本身已过时，仅在老项目维护中需处理；新项目优先选 flex，次选 inline-block，真要保浮动就务必控宽+清浮+统 margin。
