clear: both 无效是因为它只避开前一个浮动元素，不解决父容器塌陷；应使用::after伪元素触发BFC清除浮动，现代表单推荐flex布局。
为什么表单外层加 clear: both 有时没用
直接在表单容器上写 clear: both 无效，是因为 clear 只对**紧邻的前一个浮动元素**起作用，而表单本身没参与浮动，它只是被浮动内容“顶开”了位置。真正需要干预的是浮动元素之后的布局上下文。
- 浮动元素脱离文档流，后续块级元素会无视它的高度，导致父容器塌陷
-
clear是“避开上方浮动”，不是“撑开父容器” - 如果表单前面没有浮动元素，
clear完全不生效
推荐用 ::after 伪元素清除浮动（BFC 方式）
这是目前最稳妥、无副作用的清除方式，兼容到 IE8+，且不增加冗余 DOM。
.form-container::after {
content: "";
display: table;
clear: both;
}- 必须有
content，否则伪元素不渲染 -
display: table触发 BFC，让容器包含内部浮动 - 不要用
display: block+clear，它无法解决父容器塌陷 - 若需兼容 IE7，可用
display: inline-block替代
表单内字段也浮动？别用 float 布局表单
用浮动排 和 是老式写法，极易错位、换行异常、响应式失效。
- 现代方案优先用
display: flex控制表单行内对齐 - 如需左右两栏（如 label + input），给包裹容器设
display: flex，再控制flex: 1或width - 避免对
或单独设float，它们默认是 inline-level，浮动后垂直对齐难控制 - 若必须兼容旧项目，至少把每组
包进一个，再对这个 div 清除浮动检查是否遗漏了
zoom: 1（IE6/7 兼容必需）在只支持 hasLayout 的旧 IE 中，仅靠
::after无法触发父容器包含浮动，必须显式触发 layout。立即学习“前端免费学习笔记（深入）”；
.form-container { *zoom: 1; /* IE6/7 only */ } .form-container::after { content: ""; display: table; clear: both; }-
*zoom: 1是 IE6/7 的 hack，现代项目可忽略 - 不要用
overflow: hidden强制 BFC —— 它会意外裁剪阴影、下拉框、定位元素 - 如果用了
position: relative但没设z-index，某些浮动叠加场景下仍可能错位
浮动本身不是问题，问题在于它让父容器失去高度感知——这点在表单这种强结构化内容里尤其明显。真正要盯住的，是「谁该负责包裹浮动」和「谁该重新建立块级格式化上下文」，而不是在每个标签上反复试
clear。 -
