float:left 能让导航菜单变水平，是因为它使 li 元素脱离文档流并左对齐排列，从而强制并排显示；但会导致父容器高度塌陷，需用 overflow:hidden 等修复，且存在兼容性与维护问题。
float:left 为什么能让导航菜单变水平
因为 float:left 会让 li 元素脱离文档流，向左“贴边”排列，只要父容器够宽，它们就会并排挤在一起——这不是靠 flex 或 grid 的现代布局逻辑，而是靠浮动的“包裹”特性强行压成一行。
但注意：浮动元素会塌陷父容器高度，这是最常被忽略的起点。
- 必须给导航栏（
ul）设置overflow:hidden或height，否则它可能高为 0，背景色、边框全失效 -
li默认有上下 margin 和 padding，不同浏览器默认值不一致，建议统一重置：ul, li { margin: 0; padding: 0; } - 如果
a标签没设display:block，点击区域只在文字上，体验极差
浮动导航常见错位和点击失效问题
典型现象是最后一项掉到下一行、鼠标悬停没反应、或整个菜单突然换行跳动。
- 父容器宽度不够：所有
li总宽度（含 padding/margin/border）超过ul宽度，最后一个必然折行；用浏览器调试器检查盒模型尺寸 -
a没设display:block或inline-block，导致 hover 和点击仅作用于文字部分 - 用了
white-space: nowrap却忘了给ul设width，反而让内容溢出不可见 - IE6/7 中
li间莫名多出 3px 间隙，本质是 inline 元素换行符被解析为空格，解决方法是把li写在同一行，或设font-size: 0在ul上再重置子级
float:left 导航与 display:inline-block 的关键区别
两者都能实现水平排列，但行为逻辑完全不同：
立即学习“前端免费学习笔记（深入）”；
-
float:left脱离文档流，后续元素会上浮填补空缺；display:inline-block仍在文档流中，受 vertical-align 和换行符影响 - 浮动需要清除（
clear:both），否则下面的内容会绕着菜单走；inline-block不需要清浮，但要处理空白符带来的间隙 - 移动端缩放时，
float更容易因精度误差导致最后一项换行；inline-block在小屏幕下对齐更稳定（前提是控制好font-size） - 现代项目中，
float已不推荐用于布局，仅在兼容老系统（如 IE8）且无法用 flex 时才考虑
兼容性底线和替代建议
如果你真得用 float:left 做导航，IE8 是能跑通的底线；但 IE9+ 就该切到 display:flex 了。
- 不要为了“支持 IE7”硬套浮动方案——那个年代的导航基本都是 JS + 表格 hack，纯 CSS 浮动在 IE7 下仍有诸多渲染 bug
- 若必须兼容旧浏览器，优先用
display:inline-block+zoom:1（触发 IE hasLayout）代替浮动 - 真正要注意的是：浮动导航无法响应式折叠（比如移动端 hamburger 菜单），所有交互逻辑都得额外写 JS 控制显隐，而 flex + media query 可直接切换方向
浮动不是做不好导航，而是它的副作用太多，一旦加个下拉、加个图标、加个 badge，就很容易连锁崩坏。别低估清除浮动的成本。
