overflow: hidden 清除浮动会导致下拉菜单被裁剪，因其触发BFC并裁剪超出父盒的绝对定位元素；推荐使用::after伪元素、display: flow-root或flex布局来安全清除浮动。
直接用 overflow: hidden 清除浮动，下拉菜单被裁剪是最常见也最容易被忽略的问题——它确实能撑开父容器，但副作用是把 position: absolute 的下拉项当成“溢出内容”给藏了。
为什么 overflow: hidden 会吃掉下拉菜单
下拉菜单通常靠 position: absolute 定位在父导航项下方，脱离文档流后，它的渲染区域可能超出父容器边界。而 overflow: hidden 触发 BFC 的同时，也会强制裁剪所有超出父盒的内容，包括这些绝对定位的子元素。
-
overflow: auto同样有风险：滚动条可能意外出现，且裁剪逻辑一致 - 哪怕只设
overflow-x: hidden，只要 y 方向没显式放开，依然可能触发裁剪 - 这个行为不是 bug，是 CSS 规范对 overflow 的明确定义
::after 伪元素清除法（推荐）
不改变 overflow，也不新增 DOM，靠生成一个带 clear: both 的块级伪元素来闭合浮动流，完全避开裁剪问题。
- 标准写法：
.nav::after { content: ""; display: block; clear: both; } - 更稳妥可加
height: 0; visibility: hidden;防止意外占位 - 若需兼容 IE8，补一句
*zoom: 1;触发 hasLayout - 注意：必须作用于浮动元素的直接父容器（比如
<ul></ul>），不能套在更外层
display: flow-root 是更干净的现代解法
一行 CSS 让父容器成为独立 BFC 根节点，天然包含浮动子项，且对内部绝对定位元素零干扰。
立即学习“前端免费学习笔记（深入）”；
- 写法极简：
.nav { display: flow-root; } - 兼容性已覆盖 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+（2026 年基本无顾虑）
- 比伪元素法语义更强——它表达的是“我就是个布局根”，而不是“我靠 hack 补漏”
- 不支持老浏览器时，回退到伪元素方案即可，两者可共存
Flex 布局根本绕过浮动问题
如果导航项本身只是横向排列，display: flex 是最彻底的解法：没有浮动，就没有清除需求。
- 写法：
.nav { display: flex; }+ 移除所有float和clear - 自动处理换行、对齐、间距，响应式更可控
- IE10+ 支持良好；若需支持 IE9 及以下，才需保留浮动方案
- 注意：flex 容器里的子项
float会被忽略，别混用
真正容易被忽略的点是：清除浮动不是目的，让父容器正确包裹子项并**不影响后代定位逻辑**才是关键。选方案前先看下拉菜单是否依赖父容器的定位上下文——如果是，flow-root 或 flex 比伪元素更安全；如果父容器本身是 position: relative 且下拉项靠它定位，那伪元素法最稳妥。
