直接用 display: flow-root 一行解决浮动塌陷，现代浏览器全支持；clear: both 加父容器无效，因 clear 作用于自身位置而非子元素，伪元素清除需 content、display、clear 三者齐全。
直接用 display: flow-root，一行代码解决，无副作用，现代浏览器已全支持；别再往父元素上硬加 clear: both，它根本不起作用。
为什么 clear: both 加在父容器上完全无效
clear 的作用对象是「自身在文档流中的位置」，不是子元素。给父元素写 .parent { clear: both; }，只是让它自己避开前面可能存在的浮动兄弟，对内部浮动子项毫无影响——子项依然脱离文档流，父容器高度仍是 0。
真正起效的清除动作，必须出现在浮动子元素之后、且仍在同一父容器内的块级元素上。伪元素 ::after 能模拟这个“之后的兄弟”，但前提是它得渲染出来：
- 漏掉
content: ""：伪元素不生成，clear形同虚设 -
display没设成table或block：伪元素是行内级，clear: both对它无效 - 父容器本身有
overflow: hidden或transform：可能干扰伪元素的清除行为
优先用 display: flow-root，而不是 clearfix
display: flow-root 是 W3C 明确定义的 BFC 触发方式，专为解决浮动塌陷而生。它不改变子元素排布逻辑（不像 flex 或 grid 那样重置子项），也不裁剪 box-shadow、position: absolute 弹层或下拉菜单。
立即学习“前端免费学习笔记（深入）”；
只需一行：
.container { display: 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（比如固定结构的后台模板）。
标准写法三要素缺一不可：
-
content: ""：空字符串，不能省略或写成none -
display: table：比block更稳妥，能避免 IE6/7 margin 双倍问题，且天然触发 BFC 边界 -
clear: both：强制伪元素下移到所有浮动下方，从而撑开父高
嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加 .clearfix，外层加了不代表内层自动生效。
真正要留意的，是那个你加了 float: left 却忘了处理父容器的 <div>——它就在那儿，静静塌陷着。而 display: flow-root 就是把它“拉回来”的最直接方式。
