float 布局表单会导致父容器高度塌陷、对齐错乱、响应式失效等问题，应改用 flex：.form-row { display: flex; align-items: center; }。
float 对齐表单时父容器高度塌陷
用 float: left 给 label 和 input 同时浮动，最直接的后果是父容器高度变成 0——因为浮动元素脱离文档流，父容器“看不见”它们。后续内容会往上顶、错位，甚至整个表单布局崩溃。
常见错误写法：
label, input { float: left; }正确应对方式：
- 只对
label浮动，input保持普通流式布局（或加clear: both） - 必须给父容器加清除浮动，比如用
::after伪元素 +content: ""+clear: both - IE8 及更早版本中，
label若没设display: block，float可能不生效
float 下 label 和 input 宽度计算不可靠
给 label 设 width: 120px、input 设 width: 200px，看似稳当，但实际极易断行：小屏缩放、字体放大、甚至 Safari 渲染差异都会让总宽度超限，input 直接掉到下一行。
立即学习“前端免费学习笔记（深入）”；
关键影响因素：
-
box-sizing默认是content-box，border和padding额外增加占用宽度 -
label的文字换行行为未控制，长文本会撑宽容器 - 移动端键盘弹出时视口压缩，进一步加剧宽度溢出
临时缓解办法：给 label 加 min-width，input 加 max-width: calc(100% - 120px)，但依然不如 flex 可控。
float 与 flex 混用导致对齐失效
如果父容器已设 display: flex，再给子元素加 float，后者会被忽略——flex 容器中 float 无意义。但更隐蔽的问题是：有人在部分表单项用 float，另一些用 flex，结果同一表单里对齐基准混乱，vertical-align 或 align-items 全部失效。
典型陷阱：
-
label套在div里再 float，导致它不再是.form-row的直系子元素，flex 失效 - 用
float排列后又试图用align-items: center调垂直对齐，完全不起作用 - 混用
float和inline-block，因vertical-align默认值不同引发错位
现代项目里 float 不该是首选
除非要支持 IE9 以下（目前已极罕见），否则没必要用 float 做表单对齐。它无法天然处理响应式换行、空间分配、垂直居中等需求，而 display: flex 一行代码就能解决：.form-row { display: flex; align-items: center; }。
真正容易被忽略的点：
-
align-items: center在 flex 中有效，但在 float 布局中，你得靠vertical-align: middle+line-height+padding手动调，且对textarea、select效果差 - focus 状态下
outline或border变化会触发重排，float 布局更易因此错位，而 flex 更稳定 - 所有主流框架（React/Vue 组件库）和 CSS Reset 都默认弃用 float 做表单布局，沿用它会增加维护成本
