display: flow-root 是解决浮动导致父容器高度塌陷的首选方案，专为触发BFC设计，语义明确、无副作用，需作用于直接包裹浮动子元素的父容器，兼容性良好。
display: flow-root 是最直接有效的解法
现代项目里，display: flow-root 是解决浮动导致父容器高度塌陷的首选方案。它专为触发 BFC（块级格式化上下文）而设，语义明确、无副作用，不裁剪 position: absolute 弹层、阴影或 transform 动画偏移部分。
必须作用在「直接包裹浮动子元素」的父容器上；写在祖父层或子元素上都无效。若父容器原本是 inline 元素（如 span），需先设 display: block 或 inline-block，否则 flow-root 不生效。
兼容性已非常可靠：Chrome 64+、Firefox 58+、Safari 15.4+、iOS 15.4+ 全支持。2026 年绝大多数生产环境可直接使用。
兜底写法可用 @supports：
立即学习“前端免费学习笔记（深入）”；
.container { display: flow-root; }
@supports not (display: flow-root) {
.container { overflow: hidden; }
}
.clearfix::after 必须写全三要素才有效
当需要兼容 IE11 或对接无法修改的 CMS 输出 HTML 时，.clearfix::after 仍是必要手段。但漏掉任意一项都会在某些浏览器中失效，尤其旧版 QQ 浏览器或 UC 内核。
标准写法缺一不可：
-
content: ""：不写就等于没生成伪元素，DevTools 默认也不显示，需手动勾选 “Show user agent shadow DOM” 才能看到 -
display: table：比display: block更稳妥，能避免 IE6/7 margin 双倍问题，且天然触发 BFC -
clear: both：核心动作，强制该伪元素避开所有浮动，从而撑开父高
常见错误：只写了 clear: both 却忘了 content 和 display；或者把 .clearfix 加在 flex 容器上——那个伪元素根本不会参与布局。
overflow: hidden 要慎用，副作用明显
overflow: hidden 确实能触发 BFC 解决塌陷，但它会裁剪所有溢出内容：下拉菜单、box-shadow、transform 偏移部分、position: fixed 元素，全都可能被截断。
尤其在移动端或含弹窗、气泡、Tooltip 的页面中，这种副作用更难排查。
另外注意：
- 若父容器已设
height或min-height，会覆盖overflow: hidden带来的高度计算 - 不要在
display: flex或display: grid容器上硬加overflow: hidden来“修复塌陷”——那类容器本就不会塌陷，加了反而可能掩盖真实问题
clear: both 单独加在父元素上完全无效
clear: both 只控制「自身」不与前面的浮动元素同行，它不参与父容器的高度计算。父容器塌陷的根本原因是浮动子元素脱离文档流，父容器根本“看不见”它们——不是清得不够，而是没东西可清。
常见误用：
-
clear: both写在父元素上：父元素自己没浮动，这个声明完全无效 -
clear: both写在浮动子元素上：只能让该子元素换行，无法修复父容器高度归零 - 把
<div style="clear: both"></div>放在浮动元素前面：它没东西可“避开”，就按正常流渲染
真正起效的是在父容器末尾插入一个「参与文档流的块级占位」，再让它 clear: both——这就是 .clearfix::after 或空 div 的本质。
复杂点从来不在写法本身，而在层级判断：嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加 flow-root 或 .clearfix；外层加了不代表内层自动生效。
