float:left 不会产生自动间距，所谓“间距”实为 ul 的 padding-left 或 html 空格等误操作所致；真正控制间距需用 margin 并配合 :last-child 清除冗余；现代开发应优先使用 display: flex + gap。
float:left 不会自动产生间距，所有“看起来有间距”都是默认样式或误操作导致
很多人以为 float: left 会让 li 自带左右间隔，其实完全不会。浏览器对 ul 默认设置 padding-left: 40px，对 li 默认无 margin；所谓“左侧空隙”，其实是 ul 的 padding-left，不是 float 带来的。
常见错误现象：
-
li全部挤到容器最左边，序号贴边 —— 是因为没重置ul的padding-left - 第一项和第二项之间明显比后面宽 —— 很可能是 HTML 源码里
ul开始换行 + 空格，被渲染成一个空格字符（inline级间隙），跟float无关 - 多行浮动后错位、高度不齐 —— 是因为
li内容高度不一致，又没设vertical-align或清除基线影响
真正控制间距的只有 margin，但必须配合 :last-child 或 nth-child 清除末尾冗余
给 li 加 margin-right 是最直接的方式，但若不处理最后一项，就会在行尾多出一段空白，破坏对齐。
实操建议：
- 统一写
li { float: left; margin-right: 12px; } - 立刻补上
li:last-child { margin-right: 0; }，避免容器宽度溢出或换行 - 如果列数固定（比如 4 列导航），用
li:nth-child(4n) { margin-right: 0; }更稳妥 - 别用
padding替代margin控制项间距离——float元素的padding影响自身尺寸，容易让总宽度超限
IE6–8 下 li 浮动后“逐行下沉”是经典 bug，根源在子元素浮动
这个现象表现为：第 2 个 li 比第 1 个低几像素，第 3 个更低……不是间距问题，是 IE 旧版对“父元素未触发 hasLayout + 子元素浮动”的渲染缺陷。
修复方式很具体：
- 确保
float: left只加在li上，不要加在li内的a或其他子元素上 - 给
li显式设置display: block和固定height（哪怕只是height: 1px） - 给
ul加zoom: 1或*display: inline触发 hasLayout（仅 IE6–7 需要）
现代项目里，float:left 已不该是首选方案
只要不是必须兼容 IE8 及更老版本，float: left 做横向列表就是自找麻烦：要清浮动、调基线、算宽度、防换行、修 IE bug……而 display: flex 一行解决。
对比来看：
-
ul { display: flex; gap: 12px; }→ 自动均布、无塌陷、无基线错位、末项无多余 margin -
li不用设float、width、clear，也不用写:last-child - 响应式时只需改
flex-wrap和gap，不用重写整个浮动逻辑
真正需要 float: left 的场景，现在只剩维护老系统或极特殊排版需求——其余时候，它只是历史包袱，不是解决方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
