overflow:hidden清除浮动的根本原因是触发BFC，使父容器包含浮动子元素高度，但会裁剪溢出内容；现代推荐用display:flow-root替代。
浮动容器本身不裁剪，但常和overflow: hidden一起用导致误判
纯float布局的容器（比如nav > ul { overflow: hidden; }）并不会自动成为绝对定位元素的包含块——它只是靠overflow: hidden触发BFC来清除浮动。真正起裁剪作用的是那个overflow: hidden，不是float本身。
常见现场是导航菜单：外层ul设了overflow: hidden清浮动，子项li加position: relative，下拉ul用position: absolute。这时下拉菜单被裁，不是因为float，而是因为外层ul同时满足两个条件：overflow: hidden + position: static（默认值）——等等，position: static本不该创建包含块？错，这里的关键是：它虽没设position，但它是块级容器且overflow非visible，仍会成为包含块。
- 浮动容器若没配
overflow: hidden或display: flow-root，通常高度塌陷，根本没裁剪空间 - 一旦加了
overflow: hidden，它就具备了“为绝对定位子元素提供包含块”的资格（CSS规范明确列出块容器、flex容器、grid容器、table容器均适用） -
float属性本身对包含块无影响，但浮动布局常依赖overflow来维持结构，间接埋雷
为什么devtools里containing block显示的是浮动父级？
打开DevTools，在Computed面板里查目标absolute元素的containing block字段，大概率指向那个float外层容器（比如nav > ul）。这不是bug，是浏览器严格按规范执行：只要一个块级容器（包括浮动后仍为块级的容器）设置了overflow为hidden、auto或scroll，它就会成为内部position: absolute元素的包含块——与是否float、是否position: relative无关。
验证方法很简单：临时删掉该容器的overflow声明，刷新页面，containing block会立刻跳到上一级有定位的祖先，甚至html。
立即学习“前端免费学习笔记（深入）”；
- 别只盯着
position: relative——这是老式定位思维，对现代布局（flex/grid/带overflow的块容器）已不全面 - 浮动容器+
overflow: hidden组合，等价于一个隐式position: relative的裁剪边界 - Chrome 120+ 和 Firefox 115+ 的Computed面板已能准确标出containing block来源，优先信它，别猜
怎么快速修复浮动菜单下拉被裁？
不改DOM结构的前提下，最稳的解法是让那个浮动外层容器放弃裁剪权：显式加position: relative并把overflow设回visible。注意顺序不能反——overflow: visible在position: static容器上会被忽略，必须先有定位上下文。
.nav-list {
overflow: visible; /* 必须配合position才生效 */
position: relative; /* 不改变布局，只解锁overflow: visible */
}- 别用
clip-path: inset(0)替代——它视觉上像overflow: hidden，但不改变包含块逻辑，下拉仍可能被更上层裁 - 如果外层必须保持
overflow: hidden（比如防动画穿出），就把下拉菜单用ReactDOM.createPortal或<Teleport to="body">移出去，挂到body下再算位置 - 移动端要注意
:hover不触发，得补touchstart或用focus-within，否则修复了裁剪，又卡住交互
容易被忽略的隐藏干扰项：transform和backface-visibility
即使你把overflow和position都调对了，下拉菜单还是半截消失？检查父级是否加了transform（比如transform: translateZ(0)）或backface-visibility: hidden。这两者会强制创建新的包含块和层叠上下文，让裁剪行为悄悄上移到爷爷节点。
iOS Safari 16.2 和 Android WebView 117 中，backface-visibility: hidden会导致absolute元素完全不渲染（Computed里display可能显示none），而不仅仅是裁剪。
- 临时注释掉所有父级的
transform、will-change、filter、backface-visibility，看是否恢复 - 用
transform: translateZ(0.001px)代替translateZ(0)，规避合成层创建 - 打印样式里
position: fixed天然失效，但absolute若锚定在被transform污染的祖先上，也会跟着失效
