不推荐用 float 实现导航栏水平排列，因其本质为图文混排设计，会导致父容器塌陷、需额外清浮、响应式难控、易与绝对定位冲突；现代应优先使用 flex 或 grid。
float 实现导航栏水平排列为什么现在不推荐
因为 float 本质是为图文混排设计的，强行用于布局会触发一系列副作用：父容器高度塌陷、需要额外清除浮动、响应式下难以控制对齐、与其他定位方式（如 position: absolute）容易冲突。现代项目中，display: flex 或 display: grid 是更直接、可控的选择。
用 float 做导航栏时父容器高度消失怎么修
这是最典型的坑——ul 容器没高度，背景色/边框全不见。根本原因是浮动元素脱离文档流，父容器“看不见”子项了。
- 加
overflow: hidden或overflow: auto到ul或其父nav上（兼容性好，但可能意外截断内容） - 在
ul末尾插入一个带clear: both的空div（语义差，已淘汰） - 给
ul设置::after伪元素并清除浮动（推荐，不影响 HTML 结构）：.nav ul::after { content: ""; display: table; clear: both; }
float:left 和 inline-block 在菜单项排列上的实际差异
float: left 会让 li 脱离流，而 display: inline-block 仍属于行内格式化上下文，两者在间隙、垂直对齐、换行行为上表现不同。
-
float: left的li默认顶部对齐，但受行高、字体度量影响小；inline-block会保留基线对齐，常出现底部多出几像素空白 -
float下li宽度可设为百分比且严格撑满，inline-block受 HTML 中换行/空格影响，会产生不可控间隙 - 移动端缩放或字体加载时，
inline-block更容易因重排导致跳动，float相对稳定（但依然不解决根本问题）
如果必须用 float，如何避免 hover 下划线错位
浮动菜单项加 border-bottom 或伪元素下划线时，经常发现线没贴底、左右偏移，主因是浮动后 line-height 和 vertical-align 失效，以及默认 box-sizing 行为。
立即学习“前端免费学习笔记（深入）”；
- 统一设置
box-sizing: border-box，避免 padding/border 影响宽度计算 - 显式定义
height或line-height，让文字垂直居中可预测 - 下划线用
::after伪元素 + 绝对定位，锚定在li底部，而不是依赖border-bottom - 避免在浮动元素上同时用
margin和padding控制间距，优先用margin-right控制项间距离
