浮动 label 导致父容器塌陷，使 input 在文档流中右移上浮；须用 display: flow-root 创建 BFC 包含浮动，禁用 overflow: hidden；统一 height、line-height、box-sizing 等样式，并用 getBoundingClientRect() 验证坐标对齐。
浮动导致输入框“上浮”不是遮挡，是父容器塌陷
浮动的 label 会让其父容器高度塌陷，后续的 input 并未被“盖住”，而是在文档流中自然上浮到浮动元素右侧的空白区——视觉上像错位或被顶起，实则是布局结构失效。别试 z-index，它对 float 元素无效，也修不了塌陷。
必须给浮动 label 的直接父容器创建 BFC
只有 BFC 能让父容器包含浮动子项、阻止外部内容侵入浮动区域。首选方案是：
- 在
label的直接父容器（如.form-row）上设display: flow-root - 避免用
overflow: hidden：它虽能触发 BFC，但会静默裁剪下拉菜单、日期选择器等溢出内容 - 备选
overflow: auto：无溢出时不出现滚动条，也不裁剪position: absolute子元素
清除浮动后 input 仍高低不一？统一盒模型样式
即使父容器高度正常，input 和 button 因默认样式差异（如 line-height、border、font-size）仍可能视觉错位。关键操作包括：
- 统一设
height和line-height（例如都为40px），禁用line-height: normal+ 默认height组合 - 父容器加
box-sizing: border-box，确保padding不撑高 - 删掉
::placeholder中的padding、text-indent、line-height - 禁用
-webkit-appearance: textfield（尤其 iOS 旧版），防止系统样式覆盖
验证坐标是否真正对齐，不能只靠肉眼
修复后务必用 getBoundingClientRect() 打印 input 的实际坐标，并开启 DevTools 的 “Rendering → Paint flashing”，确认红色重绘区域是否严丝合缝覆盖输入框。抖动常在软键盘弹起、字体加载完成、页面缩放后复现——这些时刻的坐标偏移，肉眼根本看不出来。
立即学习“前端免费学习笔记（深入）”；
