伪类不能清除浮动，真正起作用的是::after伪元素配合clear:both；它通过插入不可见块级元素并设置clear: both来撑开父容器，而伪类仅匹配元素状态，无法生成占位节点。
伪类本身不能“清除浮动”，真正起作用的是 ::after 伪元素 + clear
很多人误以为 :first-child 或 :nth-child() 这类伪类能“清除浮动”，其实不能。清除浮动的本质是插入一个**视觉上不可见但具备布局效力的块级元素**，并让它执行 clear: both。只有伪元素（::before / ::after）能生成这样的占位节点，伪类只是匹配已有元素的逻辑状态。
::after 清除浮动的标准写法及关键参数
给浮动容器（父元素）添加 ::after 伪元素是最主流、最可靠的清除方式。它不依赖额外 HTML 标签，兼容性好（IE8+），且自动随内容高度伸缩。
-
content必须有值——哪怕只是""，否则伪元素不渲染 -
display: block是必须的，否则clear不生效（inline元素无视clear） -
clear: both才能真正“推开”左右浮动，仅clear: left或right只应对单侧浮动 - 为兼容 IE6/7，需加
zoom: 1触发 hasLayout（现代项目可省略）
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1; /* IE6/7 */
}
为什么不能用 :not(:first-child) 之类伪类来“清除非首行”？
这是常见误解源头。“清除非首行浮动”这个说法本身混淆了两个问题：一是“哪些元素浮动了”，二是“如何让父容器包裹住所有浮动子项”。伪类如 :not(:first-child) 或 :nth-child(n+2) 只能选中某个具体浮动子元素，但它们自身仍处于浮动流中，无法承担“撑高父容器”或“阻断后续浮动影响”的职责。
- 给第2个
li加clear: both，只会影响它自己的位置，对父容器高度无贡献 - 浮动子元素之间互不影响
clear，clear是作用于**当前元素自身所处的文档流位置** - 真正需要“清除”的对象是父容器的布局上下文，不是某几个子元素
实际项目中容易忽略的细节
即使写了 ::after，仍可能失效，原因往往很隐蔽：
- 父容器设置了
overflow: hidden或auto—— 它确实能闭合浮动，但会意外裁剪溢出内容（比如下拉菜单、tooltip） -
::after被其他 CSS 覆盖，例如全局重置了*::after { display: none } - 父容器本身是
display: flex或grid—— 此时浮动已失效，无需清除，“清除浮动”这个动作本身就失去了意义 - 使用了单冒号写法
:after且在严格模式下（!DOCTYPE html）—— 推荐统一用双冒号::after，避免旧浏览器解析歧义
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
