根本原因是input和button的vertical-align基准不同且父容器高度塌陷，需统一vertical-align并清除直接父容器浮动，或改用display: flex; align-items: center。
为什么float:left后input和button还是高低不一
根本不是“没加float”，而是它们默认的 vertical-align 基准不同：input 是替换元素，默认 vertical-align: baseline；button 虽也是替换元素，但浏览器对它的行内盒计算略有差异，加上默认 padding、line-height、border 不一致，视觉上必然错位。
常见错误现象包括：两个元素都 float: left 后，按钮明显比输入框高半像素，或底部留白；用 margin-top 硬调，缩放时立刻失效。
- 必须统一
vertical-align: middle或vertical-align: top（两者都加，不能只加一个） - 全局加
* { box-sizing: border-box }，否则padding会让高度失控 - 显式设置
height和line-height（如height: 36px; line-height: 36px），别依赖默认值 - 清除父容器浮动——否则
vertical-align在塌陷容器里根本没参考系
清除浮动必须作用在哪个父容器上
错位根源永远在父容器高度塌陷，不是子元素没对齐。你看到按钮“在那儿”，但鼠标点不中，大概率是父容器 offsetHeight 为 0。DevTools 里选中该按钮，看 Computed 面板的 height 和 offsetHeight 是否严重不符；再临时加 outline: 2px solid red 到父容器，如果红框没包住它，就是塌陷。
清除动作必须作用于 input 和 button 的**直接父容器**，写在 form 顶层无效。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
::after伪元素：.input-group::after { content: ""; display: table; clear: both; } - 现代项目优先用
display: flow-root（Chrome 58+/Firefox 57+/Safari 10.1+），无副作用，不干扰内部布局 - 避免
overflow: hidden——它会裁掉select下拉框、autocomplete弹层等溢出内容
用flex替代float的实际写法
别再修 float 了。display: flex 不是“更高级的选项”，它是解决这类问题的默认路径。老项目迁移时，只需改父容器，子元素不用动结构。
- 父容器加
display: flex; align-items: center;，input和button自动垂直居中，无需vertical-align - 想让输入框占满剩余宽度？给它加
flex: 1，按钮加flex-shrink: 0防拉伸 - IE10/11 需加
-ms-flex前缀；gap在 IE11 不支持，用margin-right替代 - 注意检查是否有全局
* { float: left }覆盖了你的flex声明——DevTools 的 Computed 里看display值是否真为flex
验证修复是否真正生效
很多“看起来对齐了”只是假象。修复后必须验证事件落点是否精准匹配视觉位置，否则响应式或字体缩放时还会崩。
打开 DevTools，选中按钮，查看其 bounding box 是否与视觉位置完全重合；在不同缩放比例（如 110%、125%）下拖动鼠标测试点击热区；若按钮嵌在 JS 动态插入的表单项中，还要确认新增项是否自动继承对齐逻辑——float 布局下极易漏掉 clear，而 flex 天然具备这种稳定性。
