优先用 display: flow-root 解决浮动塌陷，比 clearfix 更可靠；clearfix 失效主因是 clear: both 仅作用于兄弟元素，伪元素需满足 content、display: table、clear 三条件。
直接用 display: flow-root，比 clearfix 更可靠、更少坑——除非你必须支持 IE11 或更老浏览器。
为什么 clear: both 加在父元素上完全无效
因为 clear 只作用于「自身所在的块级盒」，且只避开前面的浮动兄弟元素。父容器和它的浮动子元素是祖先/后代关系，不是兄弟关系。写 .parent { clear: both; }，浏览器根本不会拿它去“清”子元素——父容器依然看不见浮动内容，高度还是 0。
真正起效的位置，必须是「浮动元素之后、同一父容器内」的一个块级节点。伪元素 ::after 就是模拟这个节点的干净方式。
.clearfix::after 必须同时满足的三个条件
漏掉任意一个，都可能在某些浏览器（尤其是旧版 IE 或特定渲染组合）中失效：
立即学习“前端免费学习笔记（深入）”；
-
content: ""：必须显式声明，否则伪元素不渲染，后续样式全白搭 -
display: table：比display: block更稳妥；它天然触发 BFC，还能避免 IE7 下 margin 双倍问题 -
clear: both：核心动作，强制该伪元素下移到所有浮动元素下方，从而把父容器底边拉下来
标准写法就是：
.clearfix::after {<br> content: "";<br> display: table;<br> clear: both;<br>}
加在哪？什么时候加？容易错在哪
.clearfix 类必须加在「直接包裹浮动子元素」的父容器上。套多一层（比如外层 wrapper）或少一层（比如加在 body 上），都不起作用。
需要加的典型场景：
-
<nav>里用float: left排菜单项，但外层没背景色或边框显示不出来 - 图文混排：图片
float: left，文字环绕，但下方段落被顶到左边去了
容易翻车的点：
- Chrome DevTools 默认不显示
::after，得手动勾选 “Show user agent shadow DOM” 才能确认它是否渲染成功 - 父容器如果写了
height或min-height，会覆盖clearfix带来的高度计算，先检查这些显式值 - 嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加
.clearfix，外层加了不代表内层自动生效
现代项目优先用 display: flow-root
这是 W3C 明确定义的 BFC 触发方式，专为解决这类问题而生：
- 一行代码：
.container { display: flow-root; } - 无副作用：不裁剪
box-shadow、下拉菜单、position: absolute弹层 - 不改变子元素排布逻辑（不像
flex或grid那样重置 float 行为） - Chrome 64+ / Firefox 58+ / Safari 15.4+ 全支持，2026 年已可放心落地
真正要留意的，不是伪元素怎么写，而是那个还在用 float 做布局的容器——它就在那儿，静静塌陷着，等你决定是修它，还是换掉它。
