如何使用CSSclearfix解决父元素高度塌陷

优先用 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 或特定渲染组合）中失效：

1. content: ""：必须显式声明，否则伪元素不渲染，后续样式全白搭
2. display: table：比 display: block 更稳妥；它天然触发 BFC，还能避免 IE7 下 margin 双倍问题
3. clear: both：核心动作，强制该伪元素下移到所有浮动元素下方，从而把父容器底边拉下来

标准写法就是：

.clearfix::after {
content: "";
display: table;
clear: both;
}

加在哪？什么时候加？容易错在哪

.clearfix 类必须加在「直接包裹浮动子元素」的父容器上。套多一层（比如外层 wrapper）或少一层（比如加在 body 上），都不起作用。

需要加的典型场景：

1. <nav> 里用 float: left 排菜单项，但外层没背景色或边框显示不出来
2. 图文混排：图片 float: left，文字环绕，但下方段落被顶到左边去了

容易翻车的点：

1. Chrome DevTools 默认不显示 ::after，得手动勾选 “Show user agent shadow DOM” 才能确认它是否渲染成功
2. 父容器如果写了 height 或 min-height，会覆盖 clearfix 带来的高度计算，先检查这些显式值
3. 嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加 .clearfix，外层加了不代表内层自动生效

现代项目优先用 display: flow-root

这是 W3C 明确定义的 BFC 触发方式，专为解决这类问题而生：

1. 一行代码：.container { display: flow-root; }
2. 无副作用：不裁剪 box-shadow、下拉菜单、position: absolute 弹层
3. 不改变子元素排布逻辑（不像 flex 或 grid 那样重置 float 行为）
4. Chrome 64+ / Firefox 58+ / Safari 15.4+ 全支持，2026 年已可放心落地

真正要留意的，不是伪元素怎么写，而是那个还在用 float 做布局的容器——它就在那儿，静静塌陷着，等你决定是修它，还是换掉它。