根本原因是父容器高度塌陷、vertical-align失去参考系、box-sizing不统一；须用.clearfix::after清除直接父容器浮动，统一基线与box-sizing，或直接改用flex布局。
浮动按钮在表单中对齐不一致，根本不是按钮本身写错了 float，而是它和 input、label 共享的布局上下文已经失效——父容器高度塌陷、vertical-align 失去参考系、box-sizing 不统一，三者叠加导致“看起来调好了，一缩放就崩”。必须从清除浮动、统一基线、切换布局模式三处入手。
为什么 .clearfix::after 必须加在按钮的直接父容器上
常见错误是给整个 form 加 .clearfix，但按钮如果嵌套在 .form-group 或 .button-row 里，而这个容器没清浮动，那它的 offsetHeight 就是 0。DevTools 里选中该容器，看 outline: 2px solid red 是否包不住按钮——不包就是塌陷。
-
.clearfix::after必须作用于按钮和 input 的**共同直接父容器**，比如<div class="form-group"> 或 <code><div class="button-row"> <li> <code>display: table比display: block更稳妥，兼容旧版 Safari 和 IE - 若该父容器已设
position: absolute，伪元素会失效，此时只能插入<div style="clear:both"></div> - 确保按钮和 input 同为
float: left或同为display: inline-block，不能混用 - 给它们的直接父容器设显式
line-height（如line-height: 40px），再配合height: 40px和padding精确控高 - 删掉所有影响排版的
::placeholder样式，只保留color和opacity - 必须加
* { box-sizing: border-box }，否则所有宽度/间距计算都不可靠 - 检查浮动元素总宽：用 DevTools 查看
computed中的width+padding+margin是否 ≤ 100% - 避免用
overflow: hidden替代清除浮动——select 下拉框、日期弹层会被裁掉 - 父容器加
display: flex; align-items: center;，按钮和 input 自动垂直居中 - 按钮需靠右？加
justify-content: flex-end；需左右分置？用justify-content: space-between - IE11 需补
display: -ms-flexbox，gap不支持就用margin-left替代 - 务必检查是否被全局
* { float: left }覆盖——DevTools 的Computed面板里确认display真为flex
vertical-align: middle 为什么经常没反应
因为 vertical-align 只对 inline、inline-block、table-cell 和浮动元素生效，且对齐的是“行盒（line box）的 baseline”，不是容器中线。单独给 button 设 vertical-align: middle，而 input 是默认 baseline，它们根本不在同一参考系里。
box-sizing: border-box 不加全局会放大错位
默认 box-sizing: content-box 下，width: 100% 的 input 加上 padding: 8px，实际宽度就超了父容器。按钮虽然没设 width，但它的 border 和 padding 也会让总宽溢出，导致换行或右侧留白。
现代项目别修 float，直接切 display: flex
float 本就不是为表单设计的。flex 不仅解决对齐，还天然处理响应式、RTL、JS 动态插入等场景。迁移成本极低：只改父容器样式，HTML 结构完全不动。
真正容易被忽略的是事件落点验证：很多“视觉对齐”只是假象。修复后必须用鼠标悬停测试点击区域是否精准匹配按钮视觉位置，否则缩放、字体变化或 RTL 切换时，错位会立刻重现。
