::after 伪元素本身不真正清除浮动，而是通过 content: "" 创建占位块并配合 clear: both 强制下压，使父容器包裹浮动子项；真正起作用的是 clear 属性。
为什么 ::after 能“清除”浮动，但实际不是真清除
它不改变浮动元素的脱离文档流本质，只是在父容器末尾插入一个「看不见却占位」的块级元素，靠 clear: both 强制下压，让父容器能正确包裹住浮动子项。真正起作用的是 clear，不是 ::after 本身。
- 常见错误现象：
height: 0的父容器、后续元素上移、背景色/边框消失 - 必须同时设置
content: ""，否则伪元素不渲染（哪怕内容为空） -
display: table或block都行，但table兼容性略好（IE8+），block更直观 - 不能只写
::after，必须配合clear: both，否则毫无清除效果
最简可靠的 clearfix 写法（含 IE8 兼容）
别用老旧的 :before + :after 双伪元素方案——现代项目里 :before 几乎无必要，纯增复杂度；IE8 支持 ::after，只要不用 flex 或 grid 就够用。
/* 推荐直接加在需要包裹浮动的父容器上 */
.clearfix::after {
content: "";
display: table;
clear: both;
}- 不需要
visibility: hidden或font-size: 0，content: ""+display: table已足够干净 - 避免用
height: 0或overflow: hidden替代，前者可能截断绝对定位子元素，后者会隐藏box-shadow和圆角溢出 - 如果父容器已有
display: flex或display: grid，根本不需要 clearfix——浮动在这些上下文中自动失效
content 属性不是摆设：空字符串和空格有区别
content: "" 是标准写法，content: " "（带空格）会导致意外换行或高度增加，尤其在内联上下文中更明显。
-
content: none不生效，伪元素不会被创建 -
content: ""是唯一推荐值，确保零内容、零干扰 - 某些旧版 Safari 对
content: ""渲染异常，加font-size: 0可兜底，但绝大多数场景无需 - 不要试图用
content: "."然后设color: transparent，多此一举且可能触发可访问性问题
现在还该手动写 clearfix 吗？
多数情况不该。浮动本就该是少数场景的遗留手段，比如文字环绕图片、老式栅格布局。新项目优先用 display: flex 或 display: grid，它们天然不脱离文档流，父容器自动撑开。
立即学习“前端免费学习笔记（深入）”；
- 只有当你无法改结构（如第三方组件、CMS 模板）、且必须用
float时，才上::after+clear - 用 CSS 自定义属性（
--clearfix）封装没意义，伪元素没法参数化 - PostCSS 插件如
postcss-clearfix可自动注入，但不如直接在 SCSS 中定义一个@mixin clearfix来得可控
真正容易被忽略的点是：很多人加了 ::after 却忘了父容器不能是 display: inline 或 display: inline-block——伪元素只在块级上下文中可靠生效。
