在 Web Components 中 ::after 清浮动失效是因 Shadow DOM 样式封装机制阻止外部 CSS 选择器穿透，伪元素未渲染；正确做法是将 clearfix 规则写入 :host 或组件内联 style，或改用 :host(.flow-root) { display: flow-root; }。
在 Web Components 中用 ::after 清浮动大概率失效，不是写法错了，而是伪元素根本没渲染进 Shadow DOM —— 你得把规则写进 :host 或内联 <style>，否则外部样式表完全无效。
为什么外部 .clearfix::after 在 Shadow DOM 里不生效
Shadow DOM 默认启用样式封装（scoped styling），外部 CSS 选择器无法穿透到内部节点。即使你在全局样式里写了 .clearfix::after，只要该 class 落在 Shadow Root 内，伪元素就不会被创建。
- 浏览器 computed styles 面板里查不到
::after节点 → 基本确认未渲染 -
document.querySelector('.clearfix')?.shadowRoot?.querySelector('::after')返回null，不是 bug，是设计如此 - 哪怕父组件用了
attachShadow({ mode: 'open' })，也不代表样式能“自动透传”
正确写法：把 clearfix 规则塞进 :host 或组件内联 style
必须让样式声明位于 Shadow DOM 上下文内。推荐两种写法，都需手动注入，不能依赖外部类名继承。
- 在组件 JS 中动态插入
<style>：const style = document.createElement('style');<br>style.textContent = `:host(.clearfix)::after { content: ""; display: table; clear: both; }`;<br>this.shadowRoot.appendChild(style); - 或直接在
:host里声明（更简洁）：<pre class="brush:php;toolbar:false;">:host(.clearfix) {<br> display: block;<br>}<br>:host(.clearfix)::after {<br> content: "";<br> display: table;<br> clear: both;<br>} - 避免用
shadowRoot.innerHTML += '<style>...</style>'，易被 XSS 过滤，且无作用域控制
display: flow-root 是更优解，但要注意兼容性断层
现代浏览器中，display: flow-root 是比伪元素更干净的方案，但它在 Shadow DOM 里同样要写进 :host 才生效。
立即学习“前端免费学习笔记（深入）”；
- 写法简单：
:host(.flow-root) { display: flow-root; } - Chrome 64+ / Firefox 62+ / Safari 15.4+ 支持；Edge 79+ 也 OK；IE 完全不支持（但 Web Components 本身 IE 就不支持）
- 注意：如果组件需要降级到旧版 Safari（如 iOS 15.3 及更早），
flow-root会静默 fallback 到block，此时仍需备用方案
真正容易被忽略的点：浮动本身是否还必要
Web Components 多用于封装可复用 UI 单元（按钮、卡片、列表项），而这些场景极少需要 float —— 图文环绕？用 shape-outside 更可控；横向排列？display: flex 或 inline-grid 更可靠。强行清浮，往往意味着布局模型选错了。
