display: flow-root 是解决浮动导致父容器高度塌陷的首选方案，专为触发BFC设计，语义明确、无副作用，且兼容主流浏览器；需注意其仅对float子元素有效，不适用于flex/grid父容器。
display: flow-root 是首选解法
现代项目里，display: flow-root 是解决浮动导致父容器高度塌陷最干净的方式。它专为触发 BFC（块级格式化上下文）而设，语义明确、无副作用，且不干扰子元素定位或溢出行为。
常见错误是误以为它和 display: block 或 display: flex 等价——其实它只做一件事：让父容器重新包含浮动子项的高度，其余样式照常生效。
-
display: flow-root对float子元素有效，但对已用display: flex或display: grid的父容器无效（它们本身已是独立格式化上下文） - 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 伪元素仍需掌握，但必须写全三要素
当需要兼容 IE11 或对接无法修改的 CMS 输出 HTML 时，.clearfix::after 仍是必要手段。但漏掉任意一项都会在某些浏览器中失效，尤其旧版 QQ 浏览器或 UC 内核。
调试时发现伪元素没起作用？大概率是以下任一缺失：
立即学习“前端免费学习笔记（深入）”；
-
content: ""：不写就等于没生成伪元素，DevTools 默认也不显示，需手动勾选 “Show user agent shadow DOM” 才能看到 -
display: table：比display: block更稳妥，能避免 IE6/7 margin 双倍问题，且天然触发 BFC 边界 -
clear: both：核心动作，强制该伪元素避开所有浮动，从而撑开父高
嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加 .clearfix，外层加了不代表内层自动生效。
overflow: hidden 要慎用
overflow: hidden 确实能触发 BFC 解决塌陷，但它会裁剪所有溢出内容——position: absolute 弹层、box-shadow、下拉菜单、transform 动画偏移部分，全都可能被截断。
尤其在移动端或含 fixed 元素的页面中，这种副作用更难排查。它不是“不能用”，而是“用了就得确认没有溢出需求”。
- 若父容器已设
height或min-height，会覆盖overflow: hidden带来的高度计算，优先检查这些显式值 - 不要在 flex/grid 容器上硬加
overflow: hidden来“修复塌陷”——那类容器本就不会塌陷，加了反而可能掩盖真实问题
绝对定位导致的塌陷不能靠 clearfix 解决
如果父容器高度塌陷是因为所有子元素都用了 position: absolute，那 clearfix 和 flow-root 都无效——因为绝对定位元素完全脱离文档流，BFC 不负责“感知”它们的位置。
此时真正的问题不是“怎么清浮动”，而是“怎么让父容器知道它该有多高”：
- 手动计算：遍历子元素的
offsetTop + offsetHeight，取最大值，再加 padding/border；响应式下需监听resize并节流重算 - 伪元素撑开：用
::before或::after设置content: ""+display: block+height: 0，再通过 JS 动态设置其margin-top模拟底部位置 - 改布局方式：把父容器设为
display: flex或display: grid，再用position: absolute覆盖局部元素，这样父容器仍能自适应
最容易被忽略的是：你以为在修“塌陷”，其实是在处理“脱离文档流后失去尺寸反馈”的本质问题——它不靠 CSS 清除技巧解决，得靠显式告知或布局重构。
