浮动会导致表单控件错位或父容器塌陷，清除浮动须作用于父容器而非子元素，推荐用 overflow:hidden 或伪元素：:after；现代方案首选 flex 布局，天然不塌陷、对齐可控。
浮动元素会让表单控件错位或塌陷
表单中常见 和 并排显示的需求，用 float: left 是早期常用做法。但浮动会脱离文档流，导致父容器高度塌陷、后续元素上移、对齐错乱——尤其在响应式场景下，float 容易让 跑到 上方或右侧溢出。
清除浮动 必须作用于包含块，不是子元素自身
很多人误在 上加 clear: both，这毫无意义。真正需要清除的是包裹 和 的容器（比如
），否则父容器无法包裹浮动子项。
- 推荐在容器上使用
overflow: hidden或overflow: auto—— 简洁且兼容 IE8+ - 若需更明确语义，可用 伪元素 清除：
.form-row::after {content: ""; display: table; clear: both;} - 避免用
现代替代方案：flex 布局比浮动更可靠
在表单布局中，display: flex 已成为浮动的事实替代品。它天然不塌陷、对齐可控、响应灵活，且无需清除逻辑。
-
label和input放在同一容器内，设display: flex; align-items: center; - 用
gap控制间距，比浮动 + margin 更稳定 - IE10+ 支持良好；如需支持 IE9 及以下，才需回退到浮动 + 清除方案
.form-row {display: flex; align-items: center; gap: 8px;}清除浮动失效的典型原因
即使写了 ::after 清除，仍可能无效——问题往往不在清除本身，而在其他样式干扰：
立即学习 “ 前端免费学习笔记（深入）”；
- 父容器设置了
height或max-height，压制了清除后的高度撑开 - 浮动子元素有
vertical-align或margin-top，造成视觉错位，误以为“没清干净” - 父容器是
inline或inline-block，导致::after无法触发块级格式化上下文 - 使用了
transform或position: absolute的子元素，使清除伪元素脱离同一 BFC
浮动在表单里不是不能用，但它的行为边界模糊，容易和 line-height、vertical-align、盒模型等产生隐性冲突。真正要稳，就别依赖它撑结构。
