浮动导致表单错位是父容器高度塌陷使input上浮至浮动元素侧边空白区；须给浮动元素直接父容器设display: flow-root创建BFC，禁用overflow:hidden以防裁剪，统一input/button盒模型样式，并用getBoundingClientRect()验证坐标。
浮动元素导致表单输入框被“顶上去”或错位
这不是遮挡，是父容器高度塌陷后，后续元素（包括 input）在文档流中“上浮”到浮动元素的侧边空白区。浏览器把浮动元素当作文本环绕对象，input作为块级元素虽不绕行，但其父容器若没撑开高度，它就会和浮动元素共享同一垂直空间，视觉上像被盖住或挤偏。
必须给浮动元素的直接父容器创建 BFC
只有 BFC 能让父容器包含浮动子项、阻止外部内容侵入浮动区域。别依赖 z-index——它对 float 元素无效，且无法修复布局塌陷。
- 首选
display: flow-root：写在浮动子元素的**直接父容器**上，比如.search-bar { display: flow-root; }，兼容性足够（Chrome 58+ / Firefox 57+ / Safari 10.1+） - 避免
overflow: hidden：它虽能触发 BFC，但会静默裁剪下拉菜单、日期选择器等溢出内容 - 备选
overflow: auto：比hidden安全，无溢出时不出现滚动条，也不裁剪position: absolute子元素
清除浮动后仍错位？检查 input 和 button 的盒模型
即使父容器高度正常，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”，确认红色重绘区域是否严丝合缝覆盖输入框。抖动常在软键盘弹起、字体加载完成、页面缩放后复现，仅靠肉眼观察不可靠。
立即学习“前端免费学习笔记（深入）”；
