浮动元素间距不可靠依赖html空格，因空白字符会被压缩且不参与盒模型计算；应使用css margin控制，横向设margin-right、纵向设margin-bottom，并注意清除浮动及现代替代方案。
浮动元素之间的间距不宜依赖HTML中的空格或换行来实现，因为这些空白字符在渲染时可能被浏览器忽略或合并，导致布局不可控。正确做法是使用CSS的 margin 明确控制浮动元素间的距离。
为什么空格不能可靠控制浮动间距
HTML中多个浮动元素之间的空格、制表符或换行，在浏览器解析时通常会被压缩为单个空格，且该空格本身不参与盒模型计算；更关键的是，浮动元素脱离普通文档流后，其周围空白字符不再影响它们的相对位置。因此，看似写了空格，实际渲染可能紧贴在一起甚至错位。
用 margin 统一管理浮动元素间距
为每个浮动元素（如 .item）设置一致的 margin，是最直接、可预测的方式：
- 横向排列时，推荐只设 margin-right（最后一个元素用选择器排除，避免多余空白）
- 纵向排列时，优先用 margin-bottom
- 避免同时对左右/上下都设 margin，以防双倍间距（尤其在兼容老浏览器时）
注意清除浮动带来的干扰
浮动元素可能导致父容器高度塌陷，间接影响后续元素的间距表现。若发现间距“突然变大”或错乱，检查是否遗漏清除浮动：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加 overflow: hidden 或 overflow: auto
- 使用伪元素清除：::after { content: ""; display: table; clear: both; }
- 避免用 clear: both 直接加在下一个兄弟元素上——这会强制换行，破坏原有间距逻辑
现代替代方案：考虑放弃 float
如果项目支持较新浏览器，建议逐步迁移到更可控的布局方式：
- display: inline-block + vertical-align，配合 font-size: 0 消除间隙
- flexbox（display: flex），用 gap 属性一键控制间距，无需手动算 margin
- CSS Grid，适合二维布局，行列间距均可独立定义
