优先用 display: flow-root 清除浮动，一行代码创建 BFC、无副作用、兼容现代浏览器；次选伪元素 clearfix；避免 overflow: hidden 和无效的 clear 直接写在父元素上。
标准写法就一行：.clearfix::after { content: ""; display: table; clear: both; }——其他都是冗余或过时的。
为什么clear: both不能直接加在父元素上
因为clear只影响「自身」在文档流中的位置，让它避开前面的浮动元素；它不改变父容器是否包含子元素高度。写成 .parent { clear: both; } 完全无效，浏览器会忽略这个声明——父元素自己没参与浮动排列，clear 对它没意义。
常见误判是看到后续兄弟元素下移了，就以为“清成功了”，其实只是那个兄弟元素被推下去了，.parent 依然 height: 0，边框和背景照样消失。
-
clear不是父容器的“修复开关”，它没有闭合、收口、撑高等任何副作用 - 真正要的是让父容器形成 BFC（块格式化上下文），才能感知并包裹浮动子项
-
::after伪元素的作用，就是在这个父容器内部插入一个能触发清除行为的 BFC 节点
.clearfix::after 必须满足的三个硬性条件
漏掉任一条件，清除就会静默失败，页面照常塌陷。
-
content: ""不能省，也不能写成content: none或空值——没有内容，伪元素根本不渲染 -
display必须是能响应clear的值：table是首选（IE8+ 兼容、无继承干扰、不占额外高度）；block可用但某些旧 Chrome 下可能多出 1px 间隙；table-cell或inline无效 -
clear: both必须生效：不能被更高级别规则覆盖，比如全局写了* { clear: none !important }就会直接废掉整个清除逻辑
不需要 ::before，不需要 zoom: 1，不需要 height: 0 或 visibility: hidden——这些全是为兼容 IE6/7 设计的老方案，在现代项目里只会引入不可控副作用。
什么时候不该用 .clearfix
它不是通用补丁，硬套反而破坏布局。
- 父容器已经是
display: flex或display: grid——浮动和clear都被规范忽略，加了也白加 - 父容器已设
overflow: hidden或display: flow-root——BFC 已触发，再加.clearfix是冗余且可能冲突 - 浮动来自外部（比如兄弟元素
float: right影响了当前容器）——.clearfix只作用于自身内部，对这种跨容器浮动完全无效 - CMS 或组件库动态生成的 HTML 中，父容器样式已由框架控制——盲目加 class 可能覆盖原有 BFC 行为，导致布局错乱
现代项目中，display: flow-root 才是语义清晰、无副作用的首选：.container { display: flow-root; } 一行解决，不用伪元素、不污染 DOM、不依赖 content 渲染。
容易被忽略的兼容性现实
所谓“万能 clearfix”模板，往往暗藏陷阱：
- 声称兼容 IE6–7 的写法（如带
zoom: 1和::before的双伪元素版），在 IE6 根本不解析::after，实际靠的是zoom触发 hasLayout，和清除浮动无关 - 给
position: fixed的侧边栏加.clearfix，可能干扰其脱离文档流的行为，导致定位偏移 -
display: table在 IE8+ 稳定，但在极少数 CSS-in-JS 场景下若未正确序列化content，仍可能静默失效——务必在真实环境验证渲染结果
真要稳妥，先确认是否还在维护需要支持 IE11 以下的项目；否则，display: flow-root + flex/grid 替代浮动，才是 2026 年该有的技术选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
