display: flow-root能“清除”浮动是因为它显式创建BFC，使父容器重新纳入浮动子元素布局边界，从而正确计算高度；它专为创建BFC设计，不裁剪内容、不触发滚动、不影响定位，但会重置外边距合并。
display: flow-root 为什么能“清除”浮动
它根本不是在“清除”浮动，而是让父容器重新计算高度——通过创建一个新的 BFC（块级格式化上下文），使浮动子元素重新被纳入父容器的布局边界。浮动元素依然 float，但父容器不再“看不见”它们的高度。
关键点在于：display: flow-root 是唯一专为创建 BFC 而设计的 display 值，不附带任何渲染副作用：不裁剪 box-shadow、不隐藏 position: absolute 下拉菜单、不触发滚动条。
怎么写才真正生效
直接给浮动元素的**直接父容器**加 display: flow-root 即可，不需要伪元素、空标签或额外 class：
.sidebar-wrapper {
display: flow-root;
}
但以下情况会让它失效，必须检查：
立即学习“前端免费学习笔记（深入）”；
- 父元素已设
display: flex或display: grid—— 这两个值与flow-root互斥，CSS 解析时只认最后一个声明 - 父元素用了
contain: layout或contain: paint—— 可能抑制 BFC 行为 - 项目需兼容 IE11 ——
flow-root完全不支持，得用@supports (display: flow-root) {}包裹降级
和 overflow: hidden 有什么实际区别
两者都能触发 BFC，但行为风险完全不同：
-
overflow: hidden会裁剪所有溢出内容，比如弹出菜单、阴影、transform 位移后的部分 -
display: flow-root不影响溢出可见性，但会重置外边距合并（margin collapse）——父容器和第一个/最后一个子元素之间不再发生 margin 合并，这点极易被忽略 - 某些旧版 Chrome 中
overflow: auto曾有布局抖动问题，flow-root无此风险
哪些地方千万别硬套 flow-root
不是所有浮动都需要它来“撑高”，尤其在现代后台系统中：
- Flex/Grid 容器内的子元素写了
float—— 实际上已被忽略，此时加flow-root没意义，反而可能破坏原有布局 - 纯装饰性浮动（如文字环绕图片）——
float仍是语义最准的方案，无需“清除” - JS 动态读取
offsetHeight的旧逻辑 ——flow-root改变了盒模型，返回值可能突变，需同步验证
真正容易被忽略的是：flow-root 改变的不只是高度计算，还有 margin 合并行为和 BFC 边界范围，这些在嵌套复杂布局时会突然暴露。
