float布局下label无法垂直对齐的根源是浮动元素与行内元素基线不一致；应改用inline-block+vertical-align:middle统一基线，或在必须用float时通过clear、line-height和transform等兜底。
float布局下label无法垂直对齐的根源
浮动本身不控制垂直位置，float: left或float: right只让元素脱离文档流、贴边排列，而
- 浏览器默认不会为浮动元素自动拉齐垂直中线
-
line-height在父容器上设了也没用，因为浮动元素已脱离行内上下文 - 强行加
margin-top或padding-top属于硬调，换字体/字号/浏览器就失效
用vertical-align + inline-block替代float更可靠
放弃float，改用display: inline-block配vertical-align: middle，能真正统一基线：
- 给
label和input都设display: inline-block和vertical-align: middle - 为
label设固定width（如120px）并text-align: right实现右对齐 - 为
input设width: calc(100% - 120px - 12px)或flex: 1（若外层是flex） - 外层
div.form-row必须有明确line-height: normal，避免继承干扰
.form-row {
line-height: normal;
}
label, input {
display: inline-block;
vertical-align: middle;
}
label {
width: 120px;
text-align: right;
margin-right: 12px;
}
input {
width: calc(100% - 132px); /* 120 + 12 */
}如果非要用float，必须加clear和line-height兜底
真要保留float（例如兼容IE9），得手动补三处：
- 每组
label+input必须包在独立div里，并加clear: both防塌陷 - 所有浮动子元素统一设
height或line-height（如line-height: 36px）来锚定垂直位置 -
label和input都加vertical-align: middle（虽对float无效，但可降低跨浏览器差异） - 禁止依赖
margin-top微调——它在缩放或高DPI屏下会漂移
移动端和iOS Safari特别容易出问题
iOS Safari对float表单的渲染有额外偏移，尤其当页面启用viewport缩放或字体放大时：
立即学习“前端免费学习笔记（深入）”；
-
input可能突然“上浮”几像素，label看起来像悬空 - 解决方案不是加大
margin，而是加min-width: 0到input，防止弹性收缩导致重排 - 对
label加transform: translateZ(0)触发硬件加速，减少渲染抖动 - 避免在
label里嵌span或图标，否则基线计算更混乱
浮动标签强制对齐的本质，不是“怎么让它贴右边”，而是“怎么让它和输入框共享同一套对齐坐标系”。一旦开始靠margin-top、padding-bottom硬调，就掉进浏览器渲染差异的坑里了。
