float会让inline-block元素脱离文档流，vertical-align失效；display计算值仍为inline-block，但因不在行内格式化上下文中，vertical-align所有值均无效，常见误判为对齐未生效。
float 会让 inline-block 元素脱离文档流，但 vertical-align 失效
加了 float: left 的 inline-block 元素，display 计算值仍是 inline-block（DevTools 可见），但它已不在行内格式化上下文中——vertical-align 完全失效，无论设成 top、middle 还是 baseline 都不起作用。这是最常被误判的点：开发者以为“对齐没生效”，其实是属性根本没在起效范围里。
常见现象：
- 两个
float: left的inline-block按钮，内容高度不同，第二个卡在第一个底部右侧（浮动锚点逻辑），不是顶部对齐 - 父容器设了
font-size: 0想消除间隙，但浮动后该设置对子元素无影响
浮动触发 BFC，但父容器高度塌陷风险仍在
float 会强制生成 BFC，所以浮动元素自身能包含子内容、避免 margin 合并；但它不解决父容器高度塌陷问题——除非你额外清除浮动。而清除方式选错，又会引入新问题：
-
overflow: hidden虽能撑高父容器，但可能意外裁剪box-shadow或下拉菜单 -
::after { content: ""; display: table; clear: both; }更安全，但如果父级也设了font-size: 0，伪元素的空content可能不可见，导致清除失败 - 用
display: flex或display: grid替代，天然规避塌陷，无需清除
为什么有人同时写 float 和 inline-block？现在基本没必要
这种组合主要源于 IE6/7 兼容需求：display: inline-block 在旧 IE 中不支持块级表现，需搭配 *display: inline; *zoom: 1 hack，再加 float: left 强制并排。现代浏览器中混用两者，等于用两套机制干同一件事：
立即学习“前端免费学习笔记（深入）”；
- 目标是横排左对齐 → 直接用
display: flex（父容器） +flex-direction: row - 必须支持 IE8 → 放弃
inline-block，只用float，并确保li等列表项不依赖序号渲染（否则序号会全为 “1”） - 已用
float→ 别再试图靠vertical-align或font-size: 0调整对齐，它们此时无效
inline-block 垂直错位的真实原因和轻量解法
真正导致 inline-block 元素“上浮”“下移”的，不是浮动，而是默认的 vertical-align: baseline。基线位置取决于内容：有文本的元素基线在文字底部；纯空元素（如 <button></button>）基线落在盒底，视觉上就“下沉”了。
修复只需一行：
button, img, input[type="button"] {
vertical-align: top;
}
这个方案兼容 IE8+，比改布局更轻量。但要注意：如果项目中已有大量 inline-block 组件，统一加 vertical-align: top 是成本最低的兜底手段；长期应逐步迁移到 flex 或 grid，它们从设计上就绕开了 baseline 对齐陷阱。
复杂点在于，很多人调试时先入为主认定是“浮动问题”，结果花半天查 clear 或 overflow，却忽略了那个静静躺在默认样式里的 baseline。
