微前端中子应用浮动塌陷源于样式隔离失效，根本原因是css逃逸至全局；qiankun的strictstyleisolation对@import、css-in-js等无效；需构建时禁用全局reset、加命名空间、重写浮动规则并运行时拦截关键属性。
微前端里子应用的浮动塌陷不是独立问题，而是样式隔离失效的表象——它根本上源于子应用 CSS 逃逸到全局作用域，被主应用或其它子应用的浮动规则干扰。直接在子应用里加 clear 或 display: flow-root 只能治标，且极易被外部样式覆盖。
为什么子应用里的 flow-root 有时不起作用
因为微前端中子应用的 DOM 往往挂载在主应用容器内（如 div#micro-app-container），而子应用自己的 flow-root 只作用于其内部结构；一旦主应用或第三方 reset.css 里写了 .container { overflow: hidden; } 或 div { float: left; }，就会穿透影响子应用容器的渲染上下文。
- 检查子应用根容器是否被主应用的全局选择器匹配到（比如
body .app-main这类宽泛规则） -
display: flow-root必须作用在「直接包裹浮动子项」的元素上，若子应用用了router-view动态插入内容，该容器可能没被正确标记 - Vue/React 框架默认不保证根节点是块级元素，需显式设
display: block或flow-root，否则flow-root不生效
qiankun 的 strictStyleIsolation 对浮动塌陷无效的原因
这个选项只劫持 style 标签插入和 CSSStyleSheet.insertRule，但对以下情况完全无感：
- 子应用通过
@import引入的 CSS 文件（如@import 'normalize.css'）会绕过劫持，直接进document.head - CSS-in-JS 库（如 styled-components）生成的
<style></style>是用appendChild直接塞进head，未走 qiankun 的沙箱拦截路径 - 主应用提前加载了
bootstrap.css，其中的.row::before { content: ""; display: table; clear: both; }会污染所有同名类名，子应用的.row就算加了前缀也难逃覆盖
真正可控的浮动塌陷隔离方案
核心思路：不让浮动规则跨边界生效，而不是等塌陷发生再清。
- 子应用构建时禁用所有全局 reset —— 删除
import 'normalize.css'、@import '~bootstrap/scss/_reboot.scss'等，改用 scoped 基础重置（如仅作用于[data-app="order"]下的h1, p, ul） - 用 PostCSS 插件（如
postcss-prefix-selector）重写所有浮动相关规则：.card { float: left; }→[data-app="order"] .card { float: left; }，注意它默认不处理::before伪元素，需手动补[data-app="order"] .card::before - 对 UI 框架强制命名空间：Element Plus 启用
namespace: 'order-ep'，Bootstrap 则必须重编译 SCSS，套一层容器：.order-bootstrap { @import 'bootstrap/scss/bootstrap'; } - 运行时拦截关键属性：在子应用沙箱激活后，重写
getComputedStyle返回值，过滤掉来自主应用的float、clear计算值（适用于高危场景）
浮动塌陷在微前端里从来不是单个子应用的问题，而是整个样式边界的松动信号。最容易被忽略的是：子应用构建产物中那些看似无关的 @import 和第三方 link，它们才是让 flow-root 和 clearfix 频频失效的真凶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
