浮动塌陷是文档流固有机制，非bug；现代项目仍用float因遗留系统、富文本环绕、打印样式等需求；修复首选display:flow-root，次选伪元素clearfix，慎用overflow:hidden。
因为浮动塌陷不是“过时问题”，而是文档流机制的固有行为——只要用了 float，且父容器没主动干预高度计算逻辑，塌陷就必然发生，和 CSS3 无关。
为什么现代项目还在用 float？
很多遗留系统、政务/银行内网页面、CMS 模板或老版 UI 组件库仍依赖 float 实现两栏/三栏布局；部分富文本编辑器输出的 HTML（如 <img> + 文字环绕）也会带 float: left；还有人用 float 做简单的图标左对齐+文字右对齐，图省事没重构。
- 不是不想换 Flex/Grid，而是改一处可能牵扯整套样式表和 JS 逻辑
- 某些兼容性要求（如需支持 IE10+ 但不强制用 Flex）会让团队继续沿用 float + clearfix 组合
-
float在打印样式表（@media print）中依然稳定，部分 PDF 导出工具依赖它
clear: both 加了却没用？检查这三点
常见失效不是写法错，而是上下文干扰：
-
content: ""缺失 → 伪元素不渲染 →clear: both形同虚设 - 父容器本身设置了
display: flex或display: grid→ 这类容器天然 BFC，.clearfix::after不会参与高度计算，加了也白加 - 浮动子元素用了
position: absolute或transform→ 它们已双重脱离文档流，clear对它们无效
overflow: hidden 看似生效，实际埋了雷
它确实能“撑高”父容器，但副作用隐蔽：
- 圆角阴影（
box-shadow）被裁掉：因为overflow: hidden会剪裁内容区外的绘制区域 - 下拉菜单、Tooltip、Popover 类浮层被截断，尤其当它们靠
position: absolute+top: 100%悬停展开时 - 滚动容器里嵌套浮动布局，
overflow: auto可能意外触发滚动条，破坏视觉节奏
真正容易被忽略的是：塌陷修复后，还得顺手检查 margin-collapse ——比如父容器加了 clearfix 高度正常了，但和上一个兄弟元素之间突然多出 20px 空隙，大概率是 margin-top 和 margin-bottom 折叠了，得加 overflow: hidden 或 border-top 打破折叠。这不是浮动的问题，是文档流的老规矩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
