display: flow-root是专为创建无副作用BFC设计的标准方案，语义清晰、不裁剪内容、现代浏览器全覆盖；overflow:hidden虽能触发BFC但会静默裁剪溢出元素，属历史副产品。
它根本不是用来“清除浮动”的，只是触发了 BFC（块级格式化上下文），让父容器重新包含浮动子元素的高度——浮动本身一点没变，也没被“清除”。
overflow:hidden 触发 BFC 是唯一有效机制
W3C 明确规定：只有 overflow 值为 hidden、auto 或 scroll 时，且父元素是块级盒（如 display: block），才会创建 BFC；overflow: visible 永远不触发。
-
display: flex或display: grid的父容器上加overflow: hidden—— 无效，它们自身已创建独立格式化上下文，但逻辑不同，不参与浮动包裹 - 父元素若带
transform、filter或will-change，会强制新建层叠上下文，BFC 触发失败 - 实际 computed 值不是
hidden？检查是否被更高优先级的overflow: auto覆盖 - 设置了
height或max-height？那 BFC 算出的高度会被强制截断，看起来像“没生效”
为什么下拉菜单/Tooltip 会突然消失
因为 overflow: hidden 让父容器成了 position: absolute 元素的「包含块」，所有超出父容器边界的内容，包括阴影、偏移伪元素、甚至 box-shadow 的扩散部分，都会被静默裁剪。
- 典型现象：
.dropdown-menu设了top: 100%，但父容器高度刚好卡在菜单顶部，菜单直接不渲染 -
transform: scale(0.95)下裁剪仍按原始尺寸计算，导致误切 - 移动端
touchmove在该容器内可能失效，尤其配合overflow-x: auto时 - 动画中父容器高度变化，裁剪边界不会自动重算，出现视觉错位
现代项目该用 display: flow-root 替代
display: flow-root 是 CSS 标准里专为创建无副作用 BFC 设计的值，2026 年主流浏览器全覆盖（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+）。
- 写法就一行：
display: flow-root，无需伪元素、不新增 class、不干扰定位 - 绝对定位子元素、
box-shadow、横向滚动、transform动画全部正常 - 语义清晰：“我要包裹浮动子项”，而不是“请把多出来的藏起来”
- 兼容 IE？退回
.clearfix::after伪元素方案，别硬扛overflow: hidden
真正容易被忽略的是：你花时间调试“为什么菜单没了”“为什么阴影少一半”，其实是在维护一个本不该存在的技术路径——浮动布局本身已是过时模式，而 overflow: hidden 的“清浮动”效果，只是历史缝隙里偶然有效的副产品。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
