应使用伪元素清除浮动：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。

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

• 检查浏览器开发者工具的 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 会相对于整个页面定位

浮动本身在现代布局中已非首选，但维护老项目或特定动画场景仍会遇到。真正麻烦的不是“怎么清”，而是清完之后其他定位、溢出、盒模型行为连锁变化——得盯着 computed 样式逐层看。