伪类::after清除浮动必须作用于浮动元素的直接父容器，且需设置content: ""、display: table（或block）和clear: both；若父容器为flex/grid、有显式高度、脱离文档流或浮动被覆盖，则清除失效。
伪类（比如 ::after）本身不会“失效”，但加了 ::after 却没清掉浮动，问题出在清除动作没落在正确时机或上下文里。
伪元素 ::after 必须作用于浮动元素的直接父容器
常见错误是把 .clearfix 类写在祖父级、兄弟级甚至 body 上。浮动影响只存在于「包含它的最近块级祖先」中，::after 清除的是「它所在元素内部的浮动流」，跨层级就完全不响应。
- ✅ 正确：浮动子元素在
.card内 → 给.card加.clearfix - ❌ 错误：给
.page-wrapper（包裹多个.card的外层）加.clearfix，对单个.card内浮动毫无作用 - ⚠️ 注意：
transform、will-change、contain等属性会让父容器创建新的层叠上下文或格式化上下文，可能间接干扰::after的渲染位置或清除逻辑
clear: both 不生效，大概率是伪元素根本没参与布局流
::after 默认是 display: inline，而 clear 只对块级或表格级元素起效。不显式设 display，等于写了 clear 也白写。
- 必须同时满足：
content: ""+display: table（推荐）或display: block+clear: both -
display: table比block更稳：它天然触发 BFC，且不会继承line-height导致意外撑高 - 漏掉
content: ""是高频翻车点——DevTools 里看不到::after节点，不是隐藏，是压根没生成
清除浮动的时机被其他 CSS 规则覆盖或延迟
浮动清除不是“一劳永逸”的操作，它依赖样式计算顺序和渲染阶段。以下情况会让 ::after 看似“晚了一步”：
- 父容器设置了
height或min-height—— 这些显式高度会压制::after对高度的撑开效果 - 父容器用了
display: flex或display: grid—— 浮动属性被忽略，::after清除无意义，且可能因 flex item 的默认对齐方式导致伪元素被挤到侧边或折叠 - 有 JavaScript 动态插入浮动元素，但
::after样式已静态加载 → 需确保 class 在 DOM 更新后仍存在，或用 MutationObserver 补充触发
真正容易被忽略的是：清除浮动不是“修复 bug”，而是主动介入文档流计算。一旦父容器本身脱离常规流（比如 position: absolute），或子元素浮动行为被更高优先级规则覆盖（如 float: none !important），::after 就成了无的放矢。别指望一个伪元素兜底所有布局异常——先确认浮动是否真的该存在，再决定要不要清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
