display: flow-root能闭合浮动，因其显式创建bfc使父容器重新计算浮动子元素高度和边界，仅包裹浮动、无裁剪等副作用；必须作用于直接父容器，且不与flex/grid等display值共存。
直接给浮动元素的父容器加 display: flow-root 就能闭合浮动，不需要伪元素、空标签或溢出裁剪。
为什么display: flow-root能闭合浮动
浮动元素脱离文档流，父容器无法感知其高度——根本原因是它没形成 BFC（块级格式化上下文）。display: flow-root 的作用就是**显式创建一个独立的 BFC 容器**，让父容器重新“看见”内部所有浮动子元素，并据此计算自身高度和边界。
它和 overflow: hidden 触发 BFC 的原理一致，但只做这一件事：包裹浮动，不附带任何副作用。
display: flow-root写在哪？常见失效场景
必须写在**浮动子元素的直接父容器**上。其他位置基本无效。
- 父元素已设
display: flex、display: grid或display: inline-block—— 这些值与flow-root互斥，浏览器只认最后一个声明，flow-root被忽略 - 项目需兼容 IE11 或旧版 Android WebView ——
flow-root完全不支持，必须用@supports (display: flow-root) {}包裹，或保留.clearfix::afterfallback - 父元素同时用了
contain: layout或contain: paint—— 可能抑制 BFC 行为，导致高度仍塌陷 - JS 动态读取
offsetHeight——flow-root改变了盒模型计算逻辑，原有数值可能变小或跳变
和传统 clearfix 伪元素法的关键差异
两者都能撑开高度，但路径不同：
- 伪元素法依赖
content: ""+display: table+clear: both，漏掉任一都失效；display: block不够，display: inline直接失败 -
display: flow-root是单行声明，无额外节点、不影响可访问性、不被全局 CSS 重置规则意外清空::after - 若父容器本身需要
display: flex，就不能再设flow-root，此时只能退回到 BFC 方案（比如overflow: auto，并小心处理溢出）
容易被忽略的副作用：外边距合并被重置
display: flow-root 会阻止父容器和第一个/最后一个子元素之间的外边距合并（margin collapse）。这常被误判为“样式没生效”——比如你给子元素写了 margin-top: 20px，却发现它紧贴父容器顶部，其实不是失效，是 margin collapse 被禁用了。
另外，它不解决浮动本身的语义问题：如果还在用浮动实现两栏布局，真正该做的不是换清浮动方式，而是把 float 换成 flex 或 grid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
