.clearfix::after 无效是因为三个条件缺一不可：content: "" 必须存在；display 值需参与块级布局（推荐 display: table）；父容器不能有 overflow: hidden/auto/scroll。
为什么 .clearfix::after 写了却没效果？
常见现象是父容器高度还是 0，DevTools 里也看不到伪元素。这不是浏览器不支持，而是三个硬性条件缺一不可：
-
content: ""必须存在，写成content: none或直接省略，伪元素根本不会渲染 -
display值必须能让它参与块级布局计算：display: table最稳妥（IE8+ 兼容、自动触发 BFC），display: block可用但可能因 margin collapse 导致视觉异常 - 父容器自身不能有
overflow: hidden、auto或scroll—— 这些会压制clear: both的行为，让清除逻辑失效
另外，检查是否加在了错误的父级上：必须加在「直接包裹浮动子项」的容器上。比如 HTML 是 <div class="wrapper"><div class="row"><div style="float:left"></div></div></div>，那 .clearfix 要加在 .row 上，不是 .wrapper。
display: table 和 display: block 到底怎么选？
两者都能撑高，但表现差异明显：
-
display: table生成匿名表格单元格，天然创建 BFC，不继承line-height，避免 IE6/7 下 margin 双倍、高度偏差等问题，推荐作为默认 -
display: block更直观，但若父容器有垂直方向 margin，可能因外边距合并导致伪元素“看不见”，需要额外加height: 0; visibility: hidden;才能稳定隐藏 - 绝对不要用
display: flex或display: grid—— 它们会改变伪元素的格式化上下文，使clear: both失效
标准写法就是这三行，别加多余属性：
.clearfix::after {<br> content: "";<br> display: table;<br> clear: both;<br>}
哪些地方加了 .clearfix 反而坏事？
不是所有父容器都适合套：
- 父容器已设
overflow: hidden或display: flow-root—— 它本身就在 BFC 中，再加::after属于冗余，还可能意外裁剪position: absolute的下拉菜单 - 父容器是
display: flex或display: grid—— 浮动在 flex/grid 子项中本就失效，clear: both被忽略 - 父容器是
position: absolute或fixed—— 伪元素的clear对脱离文档流的父容器无效 - 父容器已设
height或max-height—— 伪元素撑不开显式高度，清除失去意义
现代项目优先用 display: flow-root 替代，一行解决，无伪元素干扰；但若需兼容 IE11 或旧版 Safari，仍得回退到 .clearfix。
调试时怎么确认 ::after 是否真起作用？
Chrome DevTools 默认不显示伪元素，得手动勾选 “Show user agent shadow DOM” 才能在 Elements 面板看到它。更可靠的方法是：
- 在 Styles 面板里展开对应选择器，看有没有
::after块，以及里面是否包含content、display、clear - 检查 computed styles，确认伪元素是否真实渲染、是否具有
display: table和clear: both - 如果样式面板里压根没出现
::after，大概率是 class 名拼错、CSS 文件没加载，或父元素被display: none屏蔽了
真正起作用的从来不是“看起来有没有”，而是“浏览器是否把它算进高度计算里”。content: "" 漏掉，其他全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
