inline-block 不脱离文档流，可自然撑开父容器高度、支持 vertical-align 精确对齐、避免浮动导致的“俄罗斯方块”错位，间隙问题虽存在但比浮动副作用更易解决。
inline-block 不脱离文档流，天然避免父容器高度塌陷
浮动元素会完全脱离文档流，导致父容器无法感知子元素高度，常见表现为 height: auto 的父容器“缩成一条线”，后续兄弟元素上移覆盖内容。而 display: inline-block 元素始终保留在文档流中，父容器能自然撑开高度，无需额外处理。
常见错误现象：overflow: hidden、::after { content: ""; display: table; clear: both; } 这类“清除浮动”的 hack 完全不需要——用了 inline-block 就没这个事。
vertical-align 让垂直对齐可控，float 只能靠 hack
inline-block 元素默认按基线（baseline）对齐，但你可以直接用 vertical-align: top、vertical-align: middle 精确控制，且对齐行为稳定可预测；而浮动元素始终紧贴容器顶部，若想让多个浮动块底部对齐，得靠 margin-top 手动计算、或包裹额外容器 + flex，非常反直觉。
使用场景举例：
- 导航菜单项需统一顶对齐 →
vertical-align: top一行解决 - 图文混排的卡片列表需文字底部对齐 →
vertical-align: bottom - 浮动方案下，同样需求往往要加 wrapper +
position: relative+bottom偏移
高度不一致时排列更“老实”，不会出现“卡位”错乱
当一组并排元素高度不同，float 会触发经典“俄罗斯方块”问题：第一个元素高，第二个矮，第三个会试图“塞进”第一个和第二个之间的空隙右侧，导致视觉断层；而 inline-block 严格按行排列，每行只放得下几个就放几个，换行干净利落，不管子元素高矮是否一致。
参数差异关键点：
-
float: left的排列逻辑依赖“剩余空间探测”，受前序浮动元素高度影响 -
display: inline-block的排列逻辑等同于文本流，只看行宽和单个元素宽度 - 这意味着：响应式中元素宽度随 viewport 变化时，
inline-block换行行为更可预期
间隙问题虽存在，但有明确、低侵入的解法
HTML 换行符产生的 4px 左右空白间隙是 inline-block 最常被吐槽的点，但它不是 bug，而是浏览器对空白符的正常渲染。相比浮动的不可控塌陷、环绕、错位等深层布局副作用，这个间隙问题反而更表层、更易定位和修复。
实操建议（任选其一即可）：
- 父容器设
font-size: 0，子元素再单独设font-size: 16px（注意继承影响） - 子元素间用 HTML 注释连接：
<div class="item"></div> <!-- --><div class="item"></div> - 子元素设
margin-right: -4px（仅限固定数量/宽度场景）
真正容易被忽略的是：很多人在调试时把间隙误判为 margin 或 padding，花时间查样式面板却找不到“来源”，其实它压根不在 computed styles 里——它是 DOM 文本节点渲染的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
