因float使label和input脱离文档流，失去共同行高基准与父容器约束，导致vertical-align失效、margin不累积、clear作用错位；根本解法是用flex布局替代float，或通过clearfix让直接父容器包裹浮动子项。
为什么给 input 和 label 单独设 float:left 会错位
因为 float 脱离文档流后，label 和 input 不再共享同一行高基准，也不再受父容器高度约束。它们各自按自身 line-height、vertical-align（默认 baseline）和 box-sizing 计算位置，结果常是 label 高一点、input 低一点，或底部留白、换行错乱。
更麻烦的是：浮动元素之间 margin 不累积，margin-bottom 加在浮动的 .form-group 上大概率无效；而如果只给其中一个加 clear: both，另一个仍会“漂”在旁边——clear 不作用于自身，只影响后续兄弟元素。
- 别把
float: left直接写在label或input上，语义错、可访问性差、响应式断点极易崩 - 浮动必须成组控制：用一个包裹容器（如
<div class="form-row">）统管对齐与清除<li>统一 <code>box-sizing: border-box全局生效，否则width: 100%的input会因 padding 溢出
用 clearfix 强制父容器包裹浮动子项
如果必须保留 float 布局（例如兼容 IE9），关键不是调 input 的 margin，而是让它的直接父容器「看见」它。错位根源永远在父容器高度塌陷，不是子元素没对齐。
给包裹 label 和 input 的容器（比如 <div class="form-group">）加 <code>clearfix 类：
立即学习“前端免费学习笔记（深入）”；
.form-group::after {
content: "";
display: table;
clear: both;
}- 必须作用于浮动子元素的**直接父容器**，加在
form根元素上没用 - 不要用
overflow: hidden替代——它会裁剪select下拉框、autocomplete弹层等溢出内容 - 若该容器已设
position: absolute，伪元素::after会失效，此时只能回退到插入空<div style="clear:both"></div>
vertical-align: middle 不生效？检查 display 类型和 line-height
vertical-align 只对 inline、inline-block、table-cell 和浮动元素有效，但它对齐的参考线不是容器中线，而是父行盒（line box）的 baseline。所以单设 vertical-align: middle 常没反应。
- 确保
label和input同为display: inline-block或同为浮动（不能一个 float、一个 inline-block） - 给
.form-group设明确的line-height（如line-height: 36px），再配合input的height和padding精确控高 - 避免用
margin-top手动“顶”input——这会让缩放、字体变化或 RTL 切换时立刻错位
现代项目请直接切到 flex，别修 float
浮动不是为表单设计的。哪怕你把 clearfix、vertical-align、box-sizing 全配齐，遇到 iOS 键盘弹出、Chrome 表单自动填充、或 Safari 的 focus outline 渲染异常，还是可能错位。
真正省心的做法：只改包裹每组表单项的容器，不碰全局结构：
.form-group {
display: flex;
align-items: center;
}
label {
flex: 0 0 120px;
}
input, select, textarea {
flex: 1;
min-width: 0; /* 防止 flex 布局下 input 被压缩 */
}- 不要在
form根元素上设display: flex——否则按钮、提示文字全被横排，破坏语义流 -
min-width: 0是关键，否则某些浏览器下input会无视flex: 1强撑宽度 - Safari 旧版本（flex-wrap 支持弱，表单项多时建议加
flex-wrap: wrap防溢出
