vertical-align 在浮动元素上失效，因其脱离文档流不再参与行内格式化；label 和 input 需定宽、calc() 计算宽度、清除浮动三者缺一不可；推荐改用 flex 布局实现稳定对齐。
浮动布局中 label 和 input 垂直对齐不可靠，vertical-align 失效、换行频繁、父容器塌陷是常态；真要硬用 float，必须成组控制、定宽 + calc() + 清除浮动三者缺一不可。
为什么直接给 label 或 input 加 vertical-align: middle 没用？
因为 vertical-align 只在 inline 或 inline-block 上下文中起作用，而 float 后元素脱离文档流，不再参与行内格式化——浏览器根本不会计算它的基线。常见现象是：DevTools 里样式显示生效，但视觉毫无变化；或 Chrome 看着齐，Safari 里 label 明显飘高。
更关键的是，label 默认是块级，input 是替换元素，两者默认 line-height、padding、box-sizing 都不一致，强行加 vertical-align 只会让错位更难预测。
float 对齐必须满足的三个硬条件
想让 label 和 input 在同一行稳定对齐，得同时做到：
立即学习“前端免费学习笔记（深入）”；
-
label必须设固定宽度（如width: 120px），不能靠内容撑开，否则不同长度 label 会导致 input 起始位置不一致 -
input必须也设float: left，且宽度用calc(100% - 120px)计算，不能写死像素值，否则响应式断点会崩 - 包裹两者的直接父容器（比如
<div class="form-group">）必须清除浮动，推荐用伪元素：.form-group::after { content: ""; display: table; clear: both; }
容易被忽略的兼容性雷区
IE8–IE10 下 calc() 不支持，若需兼容，得回退到固定像素 width，或用条件注释加载 polyfill；现代项目中，box-sizing: border-box 必须全局生效，否则 padding 和 border 会吃掉 calc() 算出的宽度，导致 input 溢出或挤压。
另外，label 内若有 * 星号（如必填标记），它必须包含在 width 计算范围内，否则右侧留白不均；字体切换（比如从系统字体切到微软雅黑）也会改变实际渲染宽度，上线前务必在目标环境实测。
真正省心的做法是放弃 float，改用 Flex：把 label 和 input 包进同一个 display: flex 容器，设 align-items: center，再配 gap 控间距——结构干净、语义清晰、响应式天然支持，连清除浮动这种历史包袱都一并甩掉了。
