不该用浮动做表单布局，因其导致文档流脱离、错位、响应失效及可访问性问题；推荐用css grid或flexbox替代，旧项目维护可保留，新增页面应避免。
浮动元素脱离文档流导致表单控件错位
用 float 布局表单时，label 和 input 一浮动就“飘走”，后面元素塌陷、对不齐、间距失控——根本原因是浮动元素不再参与正常流高计算。
实操建议：
- 给包含浮动子项的表单容器（如
.form-row）加overflow: hidden或display: flow-root，强制形成 BFC，包裹住浮动元素 - 避免只给单个
label或input加float；统一用父容器控制布局流向，比如.form-row { overflow: hidden; }+label { float: left; width: 120px; }+input { float: left; } - 注意 IE6/7 下
display: flow-root不支持，必须降级用zoom: 1触发 hasLayout
清除浮动后表单行距异常增大
加了 clear: both 的空 div 或伪元素，常把下一行表单顶得过远，尤其在 margin-bottom 已设值的情况下，垂直间距翻倍。
实操建议：
- 优先用伪元素清除：
::after { content: ""; display: table; clear: both; }，比<div style="clear:both"></div>更轻量且不引入冗余 DOM - 清除元素自身默认 margin/padding 要重置，例如
::after { height: 0; font-size: 0; line-height: 0; }，否则可能撑开高度 - 若用
clear: both在input上，会强制换行，破坏左右并排意图；应只作用于整行容器
浮动布局在响应式场景下完全失效
媒体查询里改 width 后，浮动元素因未重新计算流高，出现重叠、截断或错行——这不是 bug，是 float 本身不具备响应重排能力。
实操建议：
- 小屏幕直接放弃浮动，用
display: block让label和input垂直堆叠，更可控 - 如果坚持浮动，需在断点处同步重置
float和width，例如：@media (max-width: 480px) { .form-row label, .form-row input { float: none; width: 100%; } } - 注意
box-sizing: border-box必须全局开启，否则padding+width超出容器，浮动就溢出
现代项目里还该用浮动做表单布局吗
不该。不是不能，而是成本远高于收益：要处理 BFC、清除、响应式、可访问性（浮动影响阅读顺序）、打印样式等一堆边界问题。
实操建议：
- 新项目直接用
display: grid，两列布局三行代码搞定：.form-row { display: grid; grid-template-columns: 120px 1fr; gap: 8px; } - 兼容老浏览器（IE11）可退到
display: flex，但注意flex-wrap: wrap对单行表单无意义，别滥用 - 如果维护旧代码，浮动能跑通就别动；但新增表单页，别再复制粘贴那套
float+clear模板
浮动本身没坏，只是它解决的问题，现在有更稳、更少副作用的方式——而表单恰恰是最容易暴露浮动缺陷的场景之一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
