应使用伪元素清除浮动：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 上
老式写法喜欢在 前塞一个 <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。
Ztoy网络商铺多用户版
下载
在原版的基础上做了一下修正：增加1st在线支付功能与论坛用户数据结合，vip也可与论坛相关，增加互动性vip会员的全面修正评论没有提交正文的问题特价商品的调用连接问题删掉了2个木马文件去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正定单不能删除问题VIP出错问题主题添加问题商家注册页导航连接问题添加了导航FLASH源文
- 检查浏览器开发者工具的 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会相对于整个页面定位
