根本原因是父容器触发BFC但高度塌陷，且子元素absolute定位时未找到正确的position:relative祖先，导致参考body定位而被裁切。
下拉菜单被父容器裁切，根本原因是什么
浮动菜单的下拉项被父容器截断，不是因为 float 本身，而是因为父容器触发了 BFC（块级格式化上下文）但高度塌陷，同时子元素用 position: absolute 脱离文档流后，其定位参考的是最近的「非 static 定位祖先」——如果这个祖先没设 position: relative，就会向上回溯到 body 或其他意外容器，导致下拉错位或被裁剪。
为什么只用 clear: both 解决不了下拉定位问题
clear: both 只能防止后续元素绕过浮动，对已脱离文档流的 position: absolute 下拉层完全无效。它不改变定位上下文，也不修复父容器高度塌陷带来的视觉遮挡。
- 清除浮动后父容器仍可能无高度（尤其当所有子元素都
float或absolute） - 下拉
ul若未显式设置position: relative的父li，会以body为参考定位 - 常见错误：给菜单整体加
overflow: hidden清浮动，结果把下拉内容直接隐藏了
正确组合：浮动导航 + 绝对定位下拉的关键三步
核心是让浮动和绝对定位各司其职，且不互相干扰：
- 导航项（
li）保持float: left实现水平排列，但其父ul必须设position: relative（提供定位上下文） - 下拉菜单（子
ul）用position: absolute，并配合top: 100%和left: 0精确贴合父项底部 - 父容器（如
nav或外层div）用overflow: hidden或伪元素清除浮动，**但不能加overflow: hidden到有position: relative的那个ul上**——否则会裁切下拉
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav > ul {
overflow: hidden; /* 清除外层浮动 */
}
nav > ul > li {
float: left;
position: relative; /* 关键：为下拉提供定位根 */
}
nav > ul > li > ul {
position: absolute;
top: 100%;
left: 0;
display: none;
}
nav > ul > li:hover > ul {
display: block;
}移动端适配与 z-index 容易被忽略的细节
下拉菜单在 iOS Safari 或某些安卓浏览器中消失、点击无反应，往往不是浮动问题，而是叠加层级或事件穿透导致：
-
z-index必须配合position才生效；若父li没设position: relative，给下拉ul设再高的z-index也无效 - 部分老版本 Android 浏览器对
transform和z-index共存敏感，避免在导航容器上同时用transform: translateZ(0)和z-index - 移动端 hover 不可靠，需用
:focus-within或 JS 切换show类，且确保触屏设备能触发 focus（加tabindex="0"）
真正卡住人的，从来不是“怎么写”，而是“谁给谁提供了定位上下文”和“谁在裁切谁”。浮动只是布局手段，而绝对定位的参照系一旦错位，再清十次浮动也没用。
