display: flow-root能闭合浮动，因其显式创建BFC使父容器重新包含浮动子元素高度；但遇display: flex/grid/inline-block、IE11、contain: layout/paint或JS依赖offsetHeight时会失效。
直接给父容器加 display: flow-root 就能闭合浮动，前提是浏览器支持且没被其他 display 值覆盖。
为什么 display: flow-root 能闭合浮动
浮动元素脱离文档流，父容器高度塌陷为 0px，根本原因是它没形成 BFC（块级格式化上下文）。display: flow-root 的作用就是显式创建一个独立的 BFC 容器，让父容器重新“看见”并包含所有浮动子元素——它不靠隐藏溢出、不靠插入伪元素，只做这一件事。
和 overflow: hidden 触发 BFC 的原理一致，但关键区别在于：flow-root 不裁剪 box-shadow、不压住 position: absolute 弹层、也不意外触发横向滚动条。
display: flow-root 写了却无效的常见情况
它不是 CSS 开关，一按就亮。常见失效原因包括：
立即学习“前端免费学习笔记（深入）”；
- 父元素已设
display: flex、display: grid或display: inline-block——这些值与flow-root互斥，浏览器只认最后一个声明，flow-root被忽略 - 项目需兼容 IE11 或旧版 Android WebView——
flow-root在这些环境完全不支持，必须用@supports (display: flow-root) {}包裹，或保留overflow: auto等 fallback - 父元素同时用了
contain: layout或contain: paint——可能抑制 BFC 行为，导致高度仍塌陷 - JS 依赖
offsetHeight动态读取父容器高度——flow-root改变了盒模型计算逻辑，原有值可能变小或跳变
和伪元素 .clearfix::after 的实际差异
两者都能撑开高度，但路径不同：
- 伪元素法（如
.clearfix::after）必须带content: ""+display: table+clear: both，漏掉任一都可能失效；display: block不够，display: inline直接挂掉 -
display: flow-root是单行声明，无额外 DOM 节点、不影响可访问性、不被全局 CSS 重置规则意外清空content - 若父容器本身需要
display: flex，就不能再设flow-root，此时只能退回到 BFC 方案（比如用overflow: auto并小心处理溢出）
容易被忽略的关键副作用
display: flow-root 会重置外边距合并（margin collapse）——父容器和第一个/最后一个子元素之间不再发生外边距合并。这点在调试垂直间距时经常被误判为“样式没生效”。
另外，它和 flex/grid 并存友好，但不能并存：一旦你把一个容器设为 display: flex，再加 display: flow-root 就是白写。真正要解决的，从来不是怎么“清浮动”，而是该不该还在用浮动。
