应避免混用clear与overflow:hidden或display:flow-root，因二者目标重复且可能引发裁剪、冗余或冲突；现代项目优先单用display:flow-root，兼容IE时才用clearfix，调试时overflow:hidden仅限临时使用。
不能混用，尤其不能把 clear 和 overflow: hidden 或 display: flow-root 同时加在同一个父容器上——这不是叠加增强，而是制造冗余和潜在冲突。
为什么 clear + overflow: hidden 是典型错误组合
很多人看到父容器塌陷，先加 .clearfix::after，发现没效果就顺手补一句 overflow: hidden。结果是：伪元素确实渲染了，但 overflow: hidden 会静默裁剪所有溢出内容，而 clear: both 在这个上下文中根本没机会起作用——因为触发 BFC 的是后者，前者已被绕过。
-
overflow: hidden一上来就闭合了 BFC，父容器立刻“感知”到子项高度，::after清除逻辑实际未被调用 - 下拉菜单、
position: absolute提示框、box-shadow偏移部分，全会被无声截断 - 调试时很难定位问题：没有报错，只有“某处内容不见了”，且 DevTools 里看不出
clear是否生效
display: flow-root 和 clearfix 能不能一起写
语法上不冲突，但没必要。两者目标一致：让父容器建立 BFC 并包含浮动子项。display: flow-root 是专为此设计的现代方案，一行声明搞定；clearfix 是为兼容旧浏览器兜底的“模拟 BFC”手段。
- 如果项目已放弃 IE 支持（Chrome 64+、Firefox 59+、Safari 15.4+ 全支持），直接用
display: flow-root即可 - 若同时写了
display: flow-root和.clearfix类，::after伪元素仍会渲染，但对布局无额外贡献，反而增加 DOM 节点开销 - 注意
display: flow-root会重置字体继承链：父容器设了font-size: 14px，子元素没显式声明字号时，会回退到根字号（16px），这点容易被忽略
什么情况下真需要“多层保险”
只有一种合理场景：你必须同时支持 IE8+ 和现代浏览器，且父容器本身有复杂样式（比如用了 transform 或 position: relative），这时可分层处理：
立即学习“前端免费学习笔记（深入）”；
- 基础层：
.clearfix::after { content: ""; display: table; clear: both; }—— 兼容 IE8+ - 增强层：对现代浏览器额外加
@supports (display: flow-root) { .container { display: flow-root; } }—— 覆盖旧方案，避免伪元素干扰 - 绝对不要写成
.container { display: flow-root; overflow: hidden; }这种叠加，overflow: hidden的裁剪副作用依然存在
真正麻烦的不是选哪个方案，而是混用时没人检查 computed styles —— 浏览器到底用了哪个规则撑开高度，得看 DevTools 里 Computed 面板的 height 和 display 值，而不是靠猜。
