伪类不能清除子元素float属性，::before/::after仅在父元素内插入虚拟内容以撑开高度，而非修改子元素样式；真正控制子元素浮动需用子选择器或结构性伪类精准匹配目标元素。
伪类不能直接清除子节点的 float 属性
这是最关键的前置判断：::before 和 ::after 是在目标元素「内部末尾或开头插入虚拟内容」，它们本身不作用于子元素，更不能修改子元素已声明的 float 值。所谓“清除浮动”，实际是让父容器「包含」浮动子元素、避免高度塌陷，而不是把子元素的 float 设为 none。
.clearfix::after 是为父容器服务的，不是给子元素用的
你看到的常见写法：
.clearfix::after {
content: "";
display: block;
clear: both;
}
它的作用对象是 .clearfix 这个父容器自身，通过在它内部末尾插入一个块级、清浮的伪元素，强制让父容器「感知」到浮动子元素的存在，从而撑开高度。它对子元素的 float 声明完全无感，也不会覆盖或重置它。
所以如果你的目标是「只让某个特定子节点不浮动」，应该直接改那个子节点的选择器，比如：
-
ul > li:nth-child(3) { float: none; }—— 第三个直接子li不浮动 -
.nav-item.no-float { float: none; }—— 给特定子元素加类控制 -
ul > li:last-child { float: right; }—— 反向调整，而非“清除”
想精准影响某几个子元素的浮动行为，用子选择器 + 结构伪类
真正能「针对特定子节点」操作浮动的，是选择器组合，不是伪类清除逻辑。例如：
-
nav ul > li { float: left; }—— 所有直接子li浮动 -
nav ul > li:first-child { float: none; }—— 仅第一个不浮动（常用于 logo 占位） -
nav ul > li:not(:last-child) { margin-right: 1rem; }—— 避免最后一个右侧外边距溢出 -
.sidebar .widget > *:first-child { float: left; }—— 仅首层子元素中第一个浮动
注意：:first-child、:nth-of-type() 等结构性伪类匹配的是 DOM 位置，不是浮动状态，别误以为它们能“检测 float”再清除。
现代替代方案：用 display: flow-root 替代伪元素清除
如果只是为了防止父容器塌陷，且不需要兼容 IE，直接给父容器设：
.container {
display: flow-root;
}
它会创建一个新的 BFC，天然包裹所有浮动子元素，无需伪元素、无额外样式干扰、不依赖 content 或 clear。比 ::after 更干净，也更符合语义——你真正需要的从来不是“清除”，而是“正确包含”。
容易被忽略的一点：当你在调试时发现某个子元素没按预期浮动，优先检查是否被更具体的选择器覆盖（比如 li a 比 li 优先级高），而不是怀疑伪类没“清除到位”。float 的生效与否，只取决于 CSS 优先级和继承链，和父容器有没有 ::after 完全无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
