CSS Grid容器无需伪元素清浮动，因其自动创建BFC且忽略float声明；clear: both在Grid中无效，因无浮动兄弟元素可作用；问题多源于子组件内部浮动，应针对性处理而非污染Grid容器。
别在CSS Grid里用伪元素清浮动——它根本不需要清。
为什么::after清除浮动在display: grid下完全无效
浮动元素在display: grid容器中会自动“失效”：它们不再脱离文档流，float声明被忽略（除极少数例外，如float: left配合shape-outside），因此不存在父容器高度塌陷问题。此时加.clearfix::after，伪元素确实渲染了，但clear: both无目标可清——没有浮动框能影响它。
-
clear只对浮动兄弟元素生效，而Grid子项不是浮动上下文中的“兄弟”，是网格轨道上的grid item -
display: grid本身创建BFC，天然包裹所有子项，包括那些意外写了float的元素（浏览器会静默降级处理） - DevTools里能看到
::after生成的块，但它只是孤零零卡在网格末尾，不参与任何轨道分配，也不撑高容器
你真正想解决的，可能是混用浮动与Grid时的视觉错位
常见于老项目迁移：父容器设了display: grid，但某个子组件内部仍用float做图文环绕或兼容逻辑。这时问题不在Grid容器，而在那个子组件自身——它需要独立清浮动。
- 错误做法：给Grid容器加
.clearfix→ 无效，且污染布局上下文 - 正确做法：定位到具体使用
float的子组件，只在它的直接父元素上加.clearfix - 若该子组件是第三方UI库组件（如旧版
el-card），无法改HTML结构，则用container: layout强制隔离，而非堆::after
批量处理？用CSS自定义属性控制作用域更安全
如果项目中真有几十处浮动残留，又必须保留Grid主结构，可以按需注入清除逻辑，而不是全局挂.clearfix：
立即学习“前端免费学习笔记（深入）”；
- 定义作用域开关：
[data-clear-float]::after { content: ""; display: block; clear: both; } - 只在明确含浮动的容器上标记：
<div data-clear-float><img style="float:left"><p>文字</p></div> - 避免和
display: grid、display: flex等现代布局父容器共存——否则clear: both在flex/grid容器内被忽略（规范明确要求）
最常被忽略的一点：当你在Grid容器里看到“清不掉的浮动”，八成是因为那个浮动元素实际位于Grid Item内部，而你试图在Grid Container上动手脚。查DOM层级比写一百行::after更管用。
