表单浮动后整体塌陷、按钮跑偏的根本原因是 float 使 label 和 input 脱离文档流，导致父容器高度坍缩为 0；必须用 .clearfix::after 清除浮动，并统一 width 控制与 box-sizing，现代项目应优先采用 flex 布局。
为什么表单浮动后整体塌陷、按钮跑偏？
根本不是 margin 没调好，而是 float 让 label 和 input 脱离文档流，父容器（比如 .form-group 或 form）高度变成 0，后续元素直接“掉上去”。你看到的错位、间距失效、提交按钮贴着上一项——全是坍缩的连锁反应。
必须用 ::after 清除浮动，别信 overflow: hidden
给包裹表单项的父容器加 .clearfix 类，里面用伪元素撑高：
.clearfix::after {
content: "";
display: block;
clear: both;
}关键点：
-
display: block比table更稳妥，避免旧浏览器兼容问题 - 别对
form直接设overflow: hidden—— 下拉框、日期弹层、tooltip 全被裁掉 - 清除动作必须作用在“包裹每组 label+input 的最小父容器”上，比如
.form-group，而不是只清最外层form
label 和 input 宽度不一致导致视觉错位
即使清了浮动，label 是默认 inline，input 是 inline-block，width: 100% 在不同字体缩放下会溢出或收缩。统一控制宽度逻辑：
立即学习“前端免费学习笔记（深入）”；
-
label改成display: inline-block+ 固定width（如120px） -
input外包一层<div class="field">，该 div 设float: left和明确宽度（如240px），input 再设width: 100% - 全表单加
* { box-sizing: border-box }，否则 padding 会让width: 100%实际超宽
现代项目直接换 flex，别硬扛 float
浮动本就不是为表单设计的。用 display: flex 一行解决对齐、间距、响应式：
.form-row {
display: flex;
align-items: center;
gap: 8px;
}
.form-row label {
flex: 0 0 120px;
}
.form-row input {
flex: 1;
}注意：
- IE11 不支持
gap，改用margin-right替代 - 如果表单里混了 JS 动态插入的项，flex 依然能自动对齐；而 float 需要每新增一项都手动补
clear，极易漏 - RTL（从右向左语言）下，float 布局会翻车，flex 天然支持
真正难处理的是那些同时用了 float、absolute 定位和 JS 插入表单项的老系统——这时候靠 clear 和 margin 只是临时止血，重构到 flex 才是根治点。
