根本原因是input和button默认vertical-align基准不同且父容器高度塌陷，应统一vertical-align: middle、box-sizing: border-box，用flex布局替代float或通过::after伪元素清除浮动。
为什么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里选中该input，看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
验证修复是否真正生效
很多“看起来对齐了”只是假象。修复后必须验证事件落点是否精准匹配视觉位置，否则响应式或字体缩放时还会崩。
- 控制台执行：
console.log(document.querySelector('input').getBoundingClientRect())，比对top/left与实际像素位置 - DevTools → Rendering → 勾选
Paint flashing，点击时看红色闪动是否严丝合缝覆盖输入框 - 特别留意是否有意外浮动的兄弟节点（比如被JS动态插入的广告位）、或祖先元素设置了
transform/opacity: 0.99锁死了层叠上下文
最容易跳过的环节，是没做getBoundingClientRect()和Paint flashing验证——这一步不做，等于没修。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
