伪元素清除浮动失效主因是::after未渲染：content缺失或为none，或display未设为block/table等块级值；必须同时声明content:""和display:block/table，并可加height:0/overflow:hidden防空白。
伪元素清除浮动为什么没反应？
伪元素清除浮动失效，大概率不是写法错了，而是 ::after 根本没渲染出来——它默认是 inline 元素，而 clear 只对块级或表格级元素生效。
-
content值为空字符串（""）或缺失，会导致伪元素不生成，直接跳过渲染 -
display没显式设为block或table，伪元素保持inline，clear属性被忽略 - 父容器设置了
overflow: hidden或auto，看似“清了浮”，实则是触发 BFC，和伪元素无关，容易误判效果
必须写的两个关键声明
只写 ::after { content: ""; clear: both; } 是不够的。缺一不可：
-
content必须存在且非空：用""即可，但不能省略，也不能写成none或normal -
display必须设为block（最常用）或table；flex/grid也行，但会改变布局上下文，慎用 - 别漏掉
height: 0或font-size: 0，否则可能因行高撑开意外空白
正确写法示例：
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
}
为什么 display: table 有时更稳？
在老版 IE（如 IE7/8）或某些 CSS 重置后环境里，display: block 可能受 line-height、vertical-align 干扰，导致底部多出几像素空白；display: table 天然无视这些，且同样支持 clear。
-
table不会继承父级line-height，避免意外高度 - 兼容性更好：IE8+ 均支持
display: table+clear - 但注意：
table会创建匿名表格框，若父容器有border-collapse等表格相关样式，可能引发意料外行为
检查伪元素是否真生效的三步法
别靠眼睛猜，用开发者工具直击本质：
- 在 Elements 面板中展开目标元素，看是否有
::after节点（Chrome/Firefox 都显示） - 选中该伪元素，确认 Computed 栏里
content值不是none，且display是block/table等有效值 - 临时加个
background: red到::after，看是否出现色块——没出现就说明没渲染，回头查content和父元素是否被display: none或visibility: hidden影响
真正卡住的地方，往往不是“怎么写清除”，而是“它压根没出来”。content 和 display 这两个字段，少一个，::after 就只是段注释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
