vertical-align 对 float 元素无效，因其脱离文档流不参与行框构建；对 inline-block 则必须显式设置，因它仍属行内级并默认 baseline 对齐。
vertical-align 对 float 元素完全无效，而对 inline-block 元素是必须显式设置的对齐开关——两者根本不在同一套对齐机制里。
为什么 float 和 inline-block 的基线行为不能混用
浮动元素（float: left 或 float: right）脱离文档流后生成的是块级框，不参与行框（line box）构建，因此 vertical-align 属性被浏览器直接忽略；而 display: inline-block 元素仍属于行内级，会进入行框并默认按 vertical-align: baseline 对齐。这不是“效果差”，是底层模型完全不同。
常见误操作包括：
- 给
float元素写vertical-align: middle，实际毫无作用 - 把
float和inline-block元素放在同一行混排，期望它们自动对齐——结果必错位，因一个靠行框、一个靠父容器 top 边缘定位 - 用
line-height调整float元素周围文字位置，却忘了它只影响行框高度，不改变浮动框自身垂直偏移
inline-block 必须显式设 vertical-align
inline-block 元素默认对齐基准是 baseline，但不同元素的 baseline 位置天然不同：img 的 baseline 在底边向上约 4px 处，空 div 的 baseline 就在底边，含文字的 button 则取决于内部字体度量。视觉错位不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 图文并排场景（如按钮内图标+文字），统一用
vertical-align: text-bottom—— 它对齐到父元素font-size定义的 em-box 底边，不随line-height漂移 - 需要顶部严格齐平（如多行文字旁的图标），用
vertical-align: top，行为确定且兼容性好 - 避免依赖
vertical-align: middle，尤其在响应式中：它对齐的是“行框内 text-bottom 与 text-top 的中点”，该位置受兄弟元素字号、line-height、甚至字体 x-height 影响，一动就偏
float 元素想“对齐”只能绕开 vertical-align
既然 vertical-align 对 float 无效，所谓“对齐”本质是控制它和周围行内内容的相对垂直关系。可行路径只有两条：
- 改用
display: inline-block+vertical-align：把原浮动元素设为inline-block，再配vertical-align: middle或text-bottom，文字部分保持内联或也设为inline-block；此时无需clear，也无塌陷问题 - 用
line-height+ 单行约束模拟对齐：仅适用于固定高容器中的单行文字 + 浮动图标配对，例如height: 48px; line-height: 48px;配合浮动图片的margin: 8px 12px 0 0;
注意：margin-bottom 负值（如 margin-bottom: -4px）虽能临时收窄环绕缝隙，但它调整的是浮动框占位高度，不是对齐逻辑，跨浏览器表现不稳定，不推荐作为对齐方案。
现代项目优先用 flex 替代二者混合
当页面同时出现 float 和 inline-block 并试图让它们“对齐”时，说明布局模型已混乱。真正稳定可控的方式是放弃浮动，改用 display: flex：
-
align-items: flex-start实现顶部对齐 -
align-items: center实现垂直居中（对容器高度生效，不依赖字体度量） - 不再有基线、行框、浮动塌陷等隐式依赖，所有对齐行为可预测
复杂点在于：flex 不支持文字环绕浮动图样的经典排版；若业务强依赖环绕（如图文混排文章），那必须接受 float 的固有限制，不要强行拉它进行内对齐体系。
