用 flex 替代 float 是更稳妥的选择：父容器设 display: flex，input 加 flex: 1 自适应宽度，button 固定宽，align-items: stretch 自动拉高对齐，gap 控制间隙，避免浮动引发的错位、换行、点击热区窄等问题。
input 和 button 用 float 后不贴边、中间有空隙
直接给 input 和 button 都加 float: left，看起来对齐了，但实际常出现按钮下沉、输入框右侧留白、或者换行——根本原因是 float 会触发 BFC 边界计算，而默认的 vertical-align（基线对齐）和行内盒模型会让它们“错位”。
- 确保父容器设
font-size: 0或显式清除行高影响，再在子元素里重置font-size -
input和button必须设相同height和line-height（若含文字），否则基线对齐失效 - 避免依赖默认
margin，显式设margin: 0，尤其注意button在某些浏览器有默认外边距 - 父容器记得加
overflow: hidden或伪元素清除浮动，否则高度塌陷
button 点击区域小、边缘难点击
浮动后 button 常被压缩得只剩图标或文字，视觉上“贴着 input”，但实际可点击区域窄——这不是 float 的锅，而是没处理好盒模型尺寸与交互反馈。
- 别只靠
padding扩展点击区，优先用min-width+min-height保证最小尺寸 - 如果用图标按钮，
background替代content更稳；避免纯::after伪元素做点击目标 - 移动端必须加
touch-action: manipulation，否则 iOS Safari 有 300ms 延迟且点击热区识别不准 - 检查是否误设了
pointer-events: none在父层（比如为了遮罩效果顺手加了）
flex 替代 float 是更稳妥的选择
虽然问题问的是 float，但现实中只要支持 IE10+，display: flex 几乎没有兼容性风险，且天然解决对齐、间隙、换行等 float 的经典痛点。
- 父容器设
display: flex，input加flex: 1自适应宽度，button固定宽 - 用
align-items: stretch（默认值）自动拉高对齐，不用手动调height和line-height - 间隙用
gap控制，比margin更干净，不会触发 margin collapse - IE10/11 需加
-ms-flex前缀，但仅限display和flex属性，gap不支持，改用margin
input:focus 时 button 被遮挡或错位
当 input 获取焦点，某些浏览器（尤其是 Chrome）会触发缩放或 outline 渲染，导致浮动布局微偏移，button 看似“跳了一下”。
立即学习“前端免费学习笔记（深入）”；
- 统一禁用
outline：给input:focus设outline: none，改用box-shadow模拟焦点环 - 避免在
:focus里改width、padding或border宽度，这些会触发布局重排 - 如果用了
transform: scale()做聚焦放大，务必加transform-origin: left center，否则右边缘会漂移 - 检查是否有第三方库（如 autocomplete 插件）动态插入 DOM 节点，破坏了浮动流
