浮动列表空隙主因是li间换行符生成空白文本节点及盒模型尺寸不一致；解决法包括html写同一行、父容器font-size:0、注释去空白、统一box-sizing:border-box与显式宽高，或改用flex布局。
浮动列表出现空隙，多数是因为 <li> 元素间的换行符（文本节点）被浏览器解析为空格，导致元素间产生约 4px 的间隙；同时，若子元素宽度未精确控制（比如含 padding、border 或 box-sizing 不一致），也会引发换行或错位。
清除列表项间的空白字符
HTML 中 <li> 标签换行会生成空白文本节点，浮动时被当作内联内容处理，产生间隙。解决方法：
- <li>将所有
<li> 写在同一行： <li>A <li>B
<li>C
<li>设置父容器 font-size: 0，再给 <li> 单独设字体大小（适用于纯图标或固定宽高场景）
<li>使用注释消除空白：<li>A （可读性略差，慎用）
统一浮动元素的盒模型与尺寸
即使视觉上“看起来一样”，padding、border 或默认 box-sizing 差异都会让实际宽度超出预期，触发换行。务必确保：
- <li>为所有浮动项（如
li 或其子 a）设置 box-sizing: border-box <li>显式声明宽度（如 width: 25%），并确认总和 ≤ 100%（考虑边框/内边距）
<li>移除默认的 list-style 和 margin/padding（ul, li { margin: 0; padding: 0; }）
更现代的替代方案：flex 布局
浮动本就不是为布局设计的，用 display: flex 可彻底避开空隙与换行问题：
立即学习“前端免费学习笔记（深入）”；
- <li>给
ul 加 display: flex，flex-wrap: wrap（如需折行） <li>去掉所有 Float，li 默认横向排列，无空白间隙
<li>配合 gap 属性精准控制间距（无需 hack）
不复杂但容易忽略：空隙本质是 HTML 解析规则 + css 盒模型叠加的结果，盯住“空白字符”和“实际渲染宽度”两个关键点，就能稳住布局。