display: flow-root 是首选方案，专为创建BFC解决浮动塌陷而设计，一行代码生效、不裁剪溢出内容、现代浏览器全面支持。
display: flow-root 是最直接的 BFC 触发方式
现代项目里，display: flow-root 就是专为解决这类问题设计的。它明确告诉浏览器：“这个容器要建立一个独立的块级格式化上下文”，从而自然包含所有浮动子元素，且不改变子元素布局行为、不裁剪溢出内容。
常见错误是还在用 overflow: hidden 硬套，或者误以为 clear: both 加在父元素上能起作用——它根本不会影响内部浮动子项。
-
display: flow-root在 Chrome 64+ / Firefox 58+ / Safari 15.4+ 均已原生支持，2026 年可视为事实标准 - 不需要额外 DOM、不干扰
position: absolute弹层或box-shadow渲染 - 如果父容器本身已是
display: flex或display: grid，子元素的float会自动失效，此时加flow-root反而多余
overflow: hidden 能用但有隐藏风险
给父容器设 overflow: hidden（或 auto）确实能触发 BFC，兼容性极好（IE6+），但副作用很实在：所有超出容器的内容都会被裁剪。
典型踩坑场景：下拉菜单、Tooltip、绝对定位弹窗、长阴影或圆角溢出——这些在开发中稍不注意就消失不见，调试时还容易漏掉。
-
overflow: visible不触发 BFC，写了等于没写 -
overflow: scroll会强制显示滚动条，视觉干扰大 - 如果父容器已有
overflow: hidden用于其他目的（比如遮罩动画），再靠它来“顺便”清浮动，逻辑就混了
::after + clear:both 的伪元素方案仍需谨慎
伪元素清除法不是过时，而是容易写错。最常见的失效原因是三要素缺一：content: ""、display: table（或 block）、clear: both 必须同时存在。
漏掉 content: "" 是高频错误——没有内容，伪元素不渲染，clear 就没对象；用 display: block 在旧版 IE 中可能引发 margin 双倍问题，所以 display: table 更稳妥。
- 如果父容器自身设置了
overflow: hidden，伪元素的清除行为可能被截断，导致失效 - 嵌套浮动结构（比如多层卡片）必须逐层加
clearfix，不能只在外层加 - 纯 CSS 方案里，它仍是 IE11 兼容场景下的必要选择，但别当成默认首选
真正该先问的问题：还在用 float 做布局吗？
浮动本就不是为复杂布局设计的，它的原始用途是文字环绕图片。今天用 float 排多个块，本质是在用过时机制硬扛。
如果父容器已经是 display: flex 或 display: grid，子元素的 float 属性会被忽略——它退化成普通块级元素，高度塌陷问题压根不会出现。此时强行加 clearfix 或 flow-root，只会让样式表变臃肿、增加调试负担。
修复塌陷只是表面动作，重构掉 float 布局才是根治点。尤其在响应式场景下，flex 的 flex-wrap 和 grid 的 auto-fit 比手动 float + media query 稳定得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
