css浮动与清除浮动在导航栏中的应用

• 典型现象：ul.nav 高度为 0，背景色不显示，下方内容往上顶
• 根本原因：所有 li 都 float: left 后，ul 内部没有常规流元素撑开高度
• 别用 height 硬设，响应式下会出问题；也别依赖 overflow: hidden 撑高（它只是触发 BFC，副作用可能隐藏下拉菜单的溢出内容）

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 会相对于整个页面定位