浮动会导致表单控件错位或父容器塌陷，清除浮动须作用于父容器而非子元素，推荐用overflow:hidden或伪元素::after；现代方案首选flex布局，天然不塌陷、对齐可控。
浮动元素会让表单控件错位或塌陷
表单中常见 和 并排显示的需求，用 float: left 是早期常用做法。但浮动会脱离文档流，导致父容器高度塌陷、后续元素上移、对齐错乱——尤其在响应式场景下，float 容易让 跑到 上方或右侧溢出。
清除浮动必须作用于包含块，不是子元素自身
很多人误在 在表单布局中， 即使写了 南方数据企业网站管理系统 V11.0全屏版新增功能:1.首页模板布局做了全新的调整;2.新增了企业网站广告管理系统,可以在后台随意增加和修改Banner广告、对联广告、浮动广告、弹出广告;3.新增了QQ在线资讯功能，同时还有N种模板选择;4.更换了网站统计管理系统；5.对菜单进行了加粗处理,显得更美观;6.后台使用了全新的静态编辑器,提高了后台打开编辑器的速度;7.新增了一个模板;8.修改了中英文 立即学习“前端免费学习笔记（深入）”； 上加 clear: both，这毫无意义。真正需要清除的是包裹 和 的容器（比如
overflow: hidden 或 overflow: auto —— 简洁且兼容 IE8+.form-row::after {
content: "";
display: table;
clear: both;
}，冗余 DOM，破坏结构语义现代替代方案：flex 布局比浮动更可靠
display: flex 已成为浮动的事实替代品。它天然不塌陷、对齐可控、响应灵活，且无需清除逻辑。
label 和 input 放在同一容器内，设 display: flex; align-items: center;
gap 控制间距，比浮动 + margin 更稳定.form-row {
display: flex;
align-items: center;
gap: 8px;
}
清除浮动失效的典型原因
::after 清除，仍可能无效——问题往往不在清除本身，而在其他样式干扰：
浮动在表单里不是不能用，但它的行为边界模糊，容易和 height 或 max-height，压制了清除后的高度撑开vertical-align 或 margin-top，造成视觉错位，误以为“没清干净”inline 或 inline-block，导致 ::after 无法触发块级格式化上下文transform 或 position: absolute 的子元素，使清除伪元素脱离同一 BFCline-height、vertical-align、盒模型等产生隐性冲突。真正要稳，就别依赖它撑结构。
