display: flow-root能清除浮动，因其显式创建无副作用的BFC，使父容器重新包含浮动子元素并计算其高度，不裁剪溢出、不触发滚动、无需伪元素。
display: flow-root 是现代 CSS 中专门用来创建块级格式化上下文（BFC）的值，它能可靠地清除内部浮动，且比 overflow: hidden 或伪元素方案更语义清晰、副作用更小。
为什么 display: flow-root 能清除浮动？
浮动元素会脱离普通文档流，导致父容器高度塌陷。触发 BFC 的容器会“包含”其内部浮动子元素——即计算高度时把浮动元素也算进去。display: flow-root 的设计目的就是创建一个无副作用的 BFC 根容器，不改变盒模型行为（比如不裁剪溢出、不触发滚动条、不影响 outline 绘制）。
- 它和
display: block一样是块级盒子，但隐式建立 BFC - 相比
overflow: auto，它不会意外截断position: absolute子元素的定位参考或遮挡阴影 - 相比
::after { content: ""; display: table; clear: both; }，它无需额外 DOM 或伪元素，样式更干净
什么时候该用 display: flow-root 替代传统清浮动方法？
适用于需要包裹浮动子项、又不想引入布局副作用的场景，比如卡片布局、媒体对象（media object）、导航栏内浮动图标+文字等。
- 父容器本身不需要滚动、裁剪或特殊溢出行为 → 优先选
display: flow-root - 父容器已设
overflow: hidden但导致子元素box-shadow或transform溢出被剪 → 改用display: flow-root - 使用 Flex/Grid 布局时不需要它——因为它们天然形成独立格式化上下文，浮动在其中基本失效
display: flow-root 的浏览器兼容性与降级处理
主流浏览器（Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+）都支持，但 IE 完全不支持，旧版 Safari（
- 如需兼容 Safari @supports 特性查询渐进增强：
@supports (display: flow-root) { .container { display: flow-root; } } @supports not (display: flow-root) { .container { overflow: hidden; } } - 不要用
display: flow-root+float同时作用于同一元素——它本身不参与浮动流，设了也无效 - 注意：它不能替代
clear属性解决兄弟元素间的浮动干扰，只解决父容器塌陷
真正容易被忽略的是：很多开发者仍习惯性写 overflow: hidden 清浮动，却没意识到它正在悄悄吃掉 box-shadow 或让 position: absolute 子元素定位异常——display: flow-root 就是为此而生的精准解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
