clearfix兼容性最强是因为它仅依赖CSS2.1标准化的::after、content、display和clear属性，支持IE8+且副作用极小；而display:flow-root在IE11及Safari15.3以下不支持，overflow:hidden会裁剪溢出内容。
clearfix 伪元素法是目前兼容性最强的清除浮动方案，能稳定支持 IE8+，且不依赖 JavaScript 或特定布局模式。
为什么 clearfix 兼容性最强
它不依赖浏览器对新 CSS 特性的支持，只用到 CSS2.1 就已标准化的 ::after、content、display 和 clear 属性：
-
content: ""是必需的——没有它，::after不会渲染，整个清除逻辑失效 -
display: block确保伪元素参与块级流，否则clear: both不起作用 - 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 的优势在于它的失效表现是明确的（父容器塌陷），而 overflow: hidden 或 display: flow-root 的失效可能只在特定设备、字体缩放或嵌套场景下才暴露。
