应使用伪元素清除浮动：ul.nav::after { content: ""; display: table; clear: both; }，避免空div和overflow:hidden导致下拉菜单被裁剪，同时统一box-sizing:border-box并重置ul默认padding。
浮动元素导致导航栏塌陷怎么办
导航栏里用 float: left 排列 <li> 是常见做法，但父容器高度经常变成 0——不是没写高，是子元素浮动后脱离文档流，父容器“看不见”它们了。
- 典型现象：
ul.nav高度为 0，背景色不显示，下方内容往上顶 - 根本原因：所有
li都float: left后，ul内部没有常规流元素撑开高度 - 别用
height硬设，响应式下会出问题；也别依赖overflow: hidden撑高（它只是触发 BFC，副作用可能隐藏下拉菜单的溢出内容）
clear: both 不该加在导航栏末尾的空 div 上
老式写法喜欢在 </ul> 前塞一个 <div style="clear:both"></div>，现在看既冗余又语义错误——这个 div 没内容、没作用，纯为“清浮动”而存在。
- 现代更推荐给父容器
ul设置display: flex，直接绕过浮动问题（但注意 IE10 以下不支持） - 如果必须用浮动（比如要兼容旧项目），优先用伪元素清除：
ul.nav::after { content: ""; display: table; clear: both; } -
::after方案比空div更干净，且不会干扰 DOM 结构或 JS 选择器逻辑
浮动导航项的宽度计算容易出错
当给每个 li 设定固定宽度（比如 width: 120px）并 float: left 时，实际总宽度往往超出容器——因为默认有 ul 的 padding-left 和 li 的 margin 或 border。
- 检查浏览器开发者工具的 computed 样式，确认
li的最终 width 是否含 border/padding（box-sizing 默认是content-box） - 统一写
box-sizing: border-box到li或全局重置 - 移除
ul默认的padding-left: 40px，否则即使所有li加起来刚好 100%，也会因 padding 溢出 - 若用百分比宽度（如
width: 20%），记得所有li加起来 ≤ 100%，留出gap要靠margin控制，而非多占宽度
清除浮动后下拉菜单被截断怎么调
用 overflow: hidden 清浮动时，下拉菜单（ul.dropdown）常被裁掉——因为 overflow: hidden 会剪裁超出父容器的内容，而下拉菜单通常用 position: absolute 脱离文档流，但它的包含块仍是带 overflow: hidden 的导航栏。
立即学习“前端免费学习笔记（深入）”；
- 避免对导航栏父容器（如
.nav-wrapper）设overflow: hidden，改用伪元素清除 - 如果必须用
overflow，可单独给导航栏内部的浮动容器（如ul.main-nav）设overflow: visible，再在其上层 wrapper 清浮动 - 下拉菜单的
z-index要足够高，且其父li需设position: relative，否则absolute会相对于整个页面定位
