display: flow-root 是当前最优解，它通过创建无副作用的 bfc 使父容器自然包裹浮动子元素，兼容现代浏览器且不裁剪下拉菜单或影响溢出行为。
display: flow-root 是目前最优雅的清除浮动方案，但不是写上去就自动生效——它依赖浏览器支持、不与其他 display 值共存、且会悄悄改变外边距合并行为。
为什么 display: flow-root 能撑开父容器高度
浮动元素脱离文档流，父容器“看不见”它们的高度，本质是父容器没形成 BFC（块级格式化上下文）。display: flow-root 的作用就是显式创建一个独立的 BFC 容器，让父容器重新计算内部浮动子元素的布局边界。
它和 overflow: hidden 触发 BFC 的原理一致，但只做这一件事：包裹浮动，不附带任何渲染副作用。
-
overflow: hidden会裁剪box-shadow、压住position: absolute弹层、阻断横向滚动 -
display: flow-root不影响溢出可见性，也不改变滚动行为或 z-index 层级 - 它语义清晰：你不是想隐藏内容，只是想让这个容器成为独立的流根
display: flow-root 在哪些情况下会失效
它不是万能开关，常见失效场景包括：
- 父元素已设
display: flex、display: grid或display: inline-block——这些值与flow-root互斥，浏览器只认最后一个声明 - 项目需兼容 IE11 或更老浏览器——
flow-root完全不支持，必须用@supports (display: flow-root) {}包裹，或保留 fallback - 父元素同时用了
contain: layout或contain: paint——可能抑制 BFC 行为，导致高度仍塌陷 - 旧项目中 JS 依赖
offsetHeight动态读取父容器高度——flow-root改变了盒模型，原有逻辑可能返回错误值
和伪元素 ::after 清除法的实际差异
两者都能撑开高度，但路径和稳定性不同：
- 伪元素法必须写
content: ""+display: table（或display: block加height: 0），漏掉任一都无效；display: table最稳妥，display: inline直接失效 -
display: flow-root是单行声明，无额外节点、不影响可访问性、不被全局 CSS 重置规则意外覆盖 - 若父容器本身需要
display: flex，就不能再设flow-root，此时只能退回到 BFC 方案（比如用overflow: auto并小心处理溢出）
容易被忽略的关键副作用
display: flow-root 会重置外边距合并（margin collapse）——父容器和第一个/最后一个子元素之间不再发生外边距合并。这点在调试垂直间距时经常被误判为“样式没生效”。
另外，它和 flex/grid 并存友好，但不能并存：一旦你把一个容器设为 display: flex，再加 display: flow-root 就是白写。真正要迁移到现代布局，该换的是浮动本身，而不是换一种清浮动方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
