优先使用 display: flex 布局，父容器设 display: flex 可天然实现输入框与按钮同行对齐、不换行；若必须用 float，需统一 vertical-align、box-sizing 并清除浮动；务必重置默认 padding/border/height 差异。
float 会让输入框和按钮错位或换行
直接给 和 都设 float: left，大概率会出问题：它们默认的 vertical-align 是 baseline，而输入框有内边距、按钮可能带默认 line-height，视觉上一高一低；更麻烦的是，如果父容器宽度不够，第二个元素会掉到下一行——哪怕你清了 margin。
实操建议：
- 优先放弃
float：它本就不是为这种行内级组件对齐设计的，现代布局有更可控的方式 - 如果必须用 float（比如老项目不能动结构），得统一基线：
vertical-align: middle或top加到两个元素上 - 必须显式设置
box-sizing: border-box，否则padding和border会撑大实际宽度，导致拼不拢 - 父容器记得加
overflow: hidden或clearfix，不然高度塌陷，后续内容会上浮
用 display: flex 更稳当
把父容器设成 display: flex，输入框和按钮天然在同一行、自动对齐顶部，不用算 margin、不用清浮动、也不怕换行——只要没写 flex-wrap: wrap。
常见错误现象：flex 下按钮突然变宽、输入框被压缩、或者两边留白。
实操建议：
- 父容器加
display: flex，子元素默认flex: 0 0 auto，保持各自宽度 - 想让输入框占剩余空间？给它加
flex: 1，按钮保持固定宽 - 避免按钮被拉伸：明确设
flex-shrink: 0或white-space: nowrap - IE10+ 支持
flex，但 IE10/11 对flex-basis解析有差异，慎用百分比值
inline-block 方案要注意换行符吃空格
设 display: inline-block 看似简单，但 HTML 源码里换行或空格会被渲染成一个空格，导致输入框和按钮之间出现几像素缝隙。
使用场景：需要兼容 IE8/9，又不想用 float 的时候。
实操建议：
- 把两个标签写在一行，中间不留空格或换行 —— 不现实，维护性差
- 父容器设
font-size: 0，子元素再单独设font-size（按钮文字、输入框 placeholder 都要重置） - 输入框和按钮都加
vertical-align: top，否则仍可能上下错位 - 别依赖
margin-left: -4px这种魔数，不同字体、不同浏览器下表现不一致
border/padding/box-sizing 不一致是拼不拢的真凶
即使布局方式选对了， 和 默认的 padding、border、height 全都不一样。Chrome 下输入框默认有 2px 边框，按钮可能是 1px；Safari 对 appearance 处理更激进，可能抹掉部分样式。
性能 / 兼容性影响：硬写 height: 32px 容易导致文字被截或垂直居中偏移，尤其在缩放或系统字体设置异常时。
实操建议：
- 统一重置：
input, button { margin: 0; padding: 0; border: none; box-sizing: border-box; } - 用
line-height控制高度（适用于无图标按钮），配合height: auto让文字自然居中 - 检查
appearance: none是否生效，某些浏览器需加前缀如-webkit-appearance: none - 移动端注意
touch-action: manipulation，避免点击延迟影响按钮反馈
真正卡住人的，从来不是“怎么让它们靠一起”，而是“为什么靠一起后看起来还是歪的、松的、断层的”——根源几乎都在盒模型和默认样式的隐式差异上，而不是 float 写没写对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
