浮动会导致表单控件错位或父容器塌陷，清除浮动须作用于父容器而非子元素，推荐用overflow:hidden或伪元素::after；现代方案首选flex布局，天然不塌陷、对齐可控。
浮动元素会让表单控件错位或塌陷
表单中常见 <label> 和 <input> 并排显示的需求，用 float: left 是早期常用做法。但浮动会脱离文档流，导致父容器高度塌陷、后续元素上移、对齐错乱——尤其在响应式场景下，float 容易让 <input> 跑到 <label> 上方或右侧溢出。
清除浮动必须作用于包含块，不是子元素自身
很多人误在 <input> 上加 clear: both，这毫无意义。真正需要清除的是包裹 <label> 和 <input> 的容器（比如 <div class="form-row">），否则父容器无法包裹浮动子项。
- 推荐在容器上使用
overflow: hidden或overflow: auto—— 简洁且兼容 IE8+ - 若需更明确语义，可用伪元素清除：
.form-row::after { content: ""; display: table; clear: both; } - 避免用
<div style="clear:both"></div>，冗余 DOM，破坏结构语义
现代替代方案：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、盒模型等产生隐性冲突。真正要稳，就别依赖它撑结构。 
