inline-block 不能完全替代 float，但在绝大多数现代布局中更安全可控；它保留在文档流中，不导致父容器高度塌陷，无需清除浮动，支持可靠的 vertical-align 对齐，仅需处理间隙和对齐细节。
不能完全替代，但在绝大多数现代布局场景中，display: inline-block 是比 float 更安全、更可控的首选方案——前提是处理好间隙和对齐细节。
为什么 inline-block 不会引发父容器高度塌陷
浮动元素彻底脱离文档流，父容器无法感知其存在，导致 height: auto 时高度为 0；而 inline-block 元素始终保留在文档流中，父容器能自然撑开高度。
- 常见错误现象：
overflow: hidden、::after { content: ""; display: table; clear: both; }这类清除浮动 hack 完全不需要 - 使用场景：多列卡片列表、导航菜单、图标+文字按钮组——只要不涉及文字环绕图片，基本可直接替换
- 性能影响：无额外渲染重排开销；
float在复杂嵌套中可能触发多次 layout 计算
inline-block 的间隙问题怎么破
间隙本质是 HTML 中换行符/空格被解析为文本节点，再按 font-size 渲染成空白字符。它不是 bug，是规范行为。
- 最简解法：在父容器设
font-size: 0，子元素内再显式恢复font-size - 兼容性注意：IE8+ 支持
inline-block，但 IE7 需加*display: inline; *zoom: 1（当前已无必要） - 其他方案：移除 HTML 换行（不现实）、用注释消除空白（
）、或改用flex（但那是另一套逻辑）
vertical-align 比 float 的垂直对齐更可靠
float 元素默认贴顶，想让一组高度不一的块底部对齐，只能靠 margin-top 硬算或额外 wrapper + position: absolute；而 inline-block 直接用 vertical-align: bottom 或 middle 即可生效。
- 关键差异：
vertical-align作用于基线（baseline），不是容器顶部；若需顶对齐，统一设vertical-align: top - 容易踩的坑：父容器若含文本节点，
vertical-align会受其影响；建议父容器设font-size: 0后再控制子元素对齐 - 响应式表现：
inline-block换行只看行宽与单个元素宽度，不受前序元素高度干扰；float则可能出现“俄罗斯方块”错位
什么情况下还必须用 float
只剩一种真实场景：需要文字环绕图片/侧边引用块。这是 float 的原始设计目的，inline-block 无法实现环绕效果。
- 其他所谓“必须用 float”的情况，比如老项目兼容 IE7、或某些 CMS 输出不可控 HTML——现在基本不存在
- 如果目标是栅格布局、导航、卡片流，强行用
float只会增加清除逻辑和调试成本 - 真正复杂的多栏自适应，
inline-block也力有未逮，此时该上display: flex或grid，而不是回头捡float
间隙和对齐是 inline-block 唯二需要主动干预的点，其余都是开箱即用的稳定行为；而 float 的每个“方便”背后，几乎都藏着一个要手动补救的副作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
