按钮位置错乱的根本原因是父容器高度塌陷，因浮动元素脱离文档流导致offsetHeight为0，使点击区域与视觉位置不重合；必须在按钮的直接父容器上用display: flow-root或clearfix清除浮动，并统一vertical-align和box-sizing。
按钮位置错乱是因为父容器高度塌陷
浮动元素（比如 float: left 的输入框、图标或导航栏）会脱离文档流，导致其直接父容器计算高度时“看不见”它们，offsetHeight 变成 0。此时按钮虽视觉上在那儿，但实际渲染坐标已偏移——你点的位置和事件触发点不重合，表现为“点不中”“飘在别处”“缩放后错位”。
用 DevTools 选中按钮父容器，在 Computed 面板里看 height 和 offsetHeight 是否严重不符；再临时加 outline: 2px solid red，如果红框没包住按钮，就是塌陷实锤。
- 清除必须作用于按钮的**直接父容器**，写在
form或外层div上无效 - 别只给按钮加
clear: both——它只能让按钮换行，不能修复父容器包裹能力 - 全局
* { float: left }这类重置样式会偷偷覆盖你的修复，记得在 DevTools 的 Computed 里确认display值
为什么 clear: both 加了也没用
clear: both 不是开关，而是“对前一个浮动兄弟元素生效”的定位指令。它只对块级、已渲染、且紧跟在浮动元素之后的下一个兄弟元素起作用。
- 加在浮动元素自己身上？
float和clear共存时，clear被忽略 - 加在浮动元素前面的空
div上？前面没浮动元素，清了个寂寞 - 加在
span或p上却没效果？先得加display: block，否则不是块级，clear不触发
现代项目该用 display: flow-root 还是伪元素 clearfix
display: flow-root 是专为解决浮动塌陷设计的 BFC 触发方式，一行代码生效，不裁剪弹层、不干扰 position: absolute 子元素，Chrome 58+/Firefox 57+/Safari 10.1+ 全面支持。
立即学习“前端免费学习笔记（深入）”；
伪元素 .clearfix::after 仍需用于兼容 IE11 或旧 Safari，但漏掉任一关键声明就会失效：
- 必须有
content: ""—— 没内容，伪元素不生成 - 必须设
display: table（或block）—— inline 元素无法触发clear - 父容器不能是
display: flex或grid—— 此时浮动本身已失效，clear失去意义
按钮对齐不准还可能是 vertical-align 和 box-sizing 混乱
即使清除了浮动，input 和 button 默认 vertical-align: baseline，加上浏览器对替换元素的行内盒计算差异，会导致视觉高低不一。更糟的是，父容器塌陷会让 vertical-align 失去参考系。
- 统一加
vertical-align: middle（两个元素都加，不能只加一个） - 全局设
box-sizing: border-box，否则padding会额外撑高 - 显式设
height和line-height（如height: 36px; line-height: 36px），别依赖默认值 - 真正卡住的常不是 CSS——JS 里用
offsetTop或getBoundingClientRect()读取浮动后坐标做动画，Flex 下这些值全变，得重测
真正要修的从来不是按钮位置，而是让它所依赖的那个“看不见的容器”重新感知到所有子元素的存在。
