inline-block元素间缝隙源于HTML将换行/空格解析为文本节点并渲染为空白，而float通过脱离文档流规避该机制；现代布局应优先使用flex或grid，仅IE8–9等旧环境才考虑float。
inline-block 元素间为什么总有缝隙
那不是“bug”，是 HTML 解析规则本身：所有文本节点（包括换行、空格）都会被渲染成一个字符宽度的空白，inline-block 元素之间只要存在换行或空格，浏览器就照单全收——哪怕你写成 <div></div><div></div> 一行里，中间没空格，但编辑器自动加的换行符仍算空白节点。
float:left 能绕过这个空白渲染机制
float 让元素脱离普通文档流，不再参与 inline-level 的空白合并逻辑，所以父容器里放一堆 float: left 的块，它们紧贴排列，完全无视源码换行。
实操建议：
- 给子元素统一加
float: left，父容器记得触发 BFC（比如加overflow: hidden或display: flow-root），否则高度塌陷 - 避免混用
float和inline-block，否则布局行为不可控 - 如果子元素有不同高度，
float会导致后续元素“卡在半路”（即“圣杯布局”早期问题），这时得靠清除浮动或改用display: flex
现代项目里更推荐 flex 替代 float
float 是为图文环绕设计的，硬拉来当布局工具属于“借壳上市”，维护成本高、语义错位、响应式支持弱。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 父容器没清浮，内容往下掉（
margin-top看似失效，其实是父容器高度为 0） - 移动端缩放后，
float元素错位（因百分比计算受字体大小影响） - 用
display: inline-block做按钮组，切到float后，垂直对齐方式突然变默认 baseline，文字上下偏移
真要兼容 IE8–9 才考虑 float 方案
IE8 支持 float 但不支持 flex，如果你的业务还跑在这类环境里，float 是务实选择；否则，直接上 display: flex + gap 更干净。
性能与兼容性影响：
-
float触发重排开销略高于flex，尤其频繁增删子元素时 -
float不支持justify-content: space-between这类弹性对齐，得靠 margin 模拟，响应式下容易崩 - 所有现代 CSS Grid / Flex 布局调试工具（如 Chrome DevTools 的 Layout 面板）对
float的可视化支持较弱，排查错位更费劲
缝隙问题表面看是空格惹的祸，根子其实在渲染模型层级——inline-block 属于 inline formatting context，float 属于 block formatting context，两者根本不在一个“频道”上说话。别只盯着怎么“消缝”，先想清楚你到底需要哪种上下文。
