clearfix伪元素法兼容性最强，因其仅依赖css2.1标准化的::after、content、display和clear属性，稳定支持ie8+且副作用极小；而display:flow-root在ie11及safari15.3以下不支持，overflow:hidden会裁剪溢出内容。
clearfix 伪元素法兼容性最好，稳定支持 IE8+，且不依赖 JavaScript 或特定布局模式。
为什么 clearfix::after 兼容性最强
它只用到 CSS2.1 就已标准化的四个属性：::after、content、display 和 clear，没有引入任何新规范特性：
-
content: ""是必需的——没有它，伪元素根本不会渲染，整个清除逻辑失效 -
display: table比display: block更稳妥，能避免 IE6–7 中因zoom: 1触发的渲染异常 - IE6–IE7 需额外加
*zoom: 1触发 hasLayout，现代项目通常可忽略 - 它不改变父容器的盒模型、溢出行为或定位上下文，副作用极小
display: flow-root 看似简洁，但兼容性有断层
这个值在 Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 才可用，意味着：
- IE11 及更早版本完全不识别，会静默降级为
display: block，导致塌陷重现 - Safari 15.3 及更早存在渲染异常，比如 flex 子项的
margin折叠失效 - 某些 CMS 或低代码平台强制启用 IE 兼容模式时，该声明会被忽略
- 它会重置部分继承值（如
font-size），老项目中可能意外缩放文字
哪些“能用”但实际埋雷的做法
几个看似有效、实则容易在上线后暴露问题的方案：
-
overflow: hidden：虽在 IE6+ 都有效，但会裁剪box-shadow、transform位移内容、position: absolute子元素，调试时难发现 - 空
<div class="clear"></div>：HTML 层面污染严重，DOM 节点数增加，动态增删浮动元素时极易遗漏同步清理 -
clear: both直接写在父元素上：语法合法但无效——clear只对兄弟元素生效，对祖先无效 - 给父元素也设
float或inline-block：破坏居中（margin: 0 auto失效）、影响后续布局流，属于治标不治本
真正容易被忽略的是：兼容性不是单看“能不能显示”，而是“会不会悄悄错”。clearfix 的失效表现是明确的（父容器高度为 0），而 overflow: hidden 或 display: flow-root 的失效可能只在特定设备、字体缩放或嵌套场景下才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
