flow-root在ie所有版本（含ie11）完全不支持，解析时回退为display:block，丧失清除浮动能力，导致父容器高度塌陷；edge legacy也不支持，仅chromium edge 79+及现代浏览器支持。
flow-root 在 IE 中完全不支持
直接说结论：flow-root 是 CSS Display Module Level 3 的特性，IE 所有版本（包括 IE11）都不识别 display: flow-root，解析时会回退为 display: block，但失去清除浮动能力。这意味着如果你依赖它解决父容器高度塌陷，IE 下布局会立刻出错。
常见错误现象：父元素高度为 0、后续元素上移、背景色/边框消失——尤其在卡片、列表项、表单区域中高频出现。
- 不能靠
@supports (display: flow-root)安全降级，因为 IE11 不支持@supports查询本身 - 若项目仍需兼容 IE，必须用传统方案替代，比如
overflow: hidden（注意会裁剪position: absolute子元素）、clearfix伪类或额外 wrapper 元素 - Edge Legacy（EdgeHTML 18 及之前）也无支持；只有 Chromium 内核 Edge（79+）及现代 Chrome/Firefox/Safari 支持
Firefox 早期版本对 flow-root 的盒模型处理不一致
Firefox 53–63 存在一个隐藏坑：当 flow-root 容器内含 float 元素 + margin 时，外边距可能被忽略或合并异常，尤其在 flex 或 grid 子项混用场景下更明显。
使用场景举例：侧边栏浮动 + 主内容区设为 display: flow-root，但主内容顶部 margin-top 消失。
- Firefox 64+ 已修复，但若需支持旧版 Firefox（如企业内网环境），建议加一层
padding替代margin - 避免在
flow-root内部同时使用float和margin-collapse相关布局逻辑 - 可临时用
display: block+overflow: auto验证是否为该 bug 导致
flow-root 与 position: absolute 子元素的层叠上下文变化
flow-root 会触发新的块级格式化上下文（BFC），而 BFC 本身会影响 z-index 生效条件——尤其当子元素含 position: absolute 且未显式设置 z-index 时，渲染顺序可能和预期不同。
典型问题：弹出层（tooltip/dropdown）被 flow-root 父容器截断或遮挡，即使它 DOM 位置在后面。
- 根本原因是
flow-root创建了独立的层叠上下文，其子元素的 stacking context 从属于它，而非全局 - 解决方案不是去掉
flow-root，而是给绝对定位子元素加z-index: 1（或更高值），并确保父容器z-index不设为负数 - 注意：
z-index只对position为relative/absolute/fixed的元素生效，别漏写position
移动端 Safari 对 flow-root 的解析延迟问题
iOS 12–13.3 的 Safari（对应 WKWebView 12–13.3）存在一个罕见但真实的问题：首次渲染时 flow-root 容器可能不立即建立 BFC，导致浮动未被清除，直到 resize 或 scroll 触发重排才恢复。
这通常发生在 SPA 路由切换后动态插入的浮动内容中，比如加载完数据再渲染浮动头像列表。
- 临时缓解：在插入浮动内容后，强制触发一次 layout，例如
el.offsetHeight或el.style.transform = 'translateZ(0)' - 更稳妥的做法是避免在动态内容中依赖
flow-root清除浮动，改用display: flex或display: grid布局替代 - iOS 14+ 已修复，但仍有大量 iOS 13 设备在流通，尤其教育/医疗类封闭系统
flow-root，看起来正常，但某台设备上它压根没起作用，而且还没报错。BFC 类特性大多如此——静默失效，排查成本远高于写错一个 class 名。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
