float布局在导航栏中不推荐，因其导致高度塌陷、对齐困难、响应式失控；应改用flexbox，一行代码实现左右对齐与垂直居中，结构清晰且可维护性强。
直接用 float 实现 Logo 左对齐、菜单右对齐，技术上可行但已不推荐——它依赖清除浮动、易塌陷、响应式难控制，且垂直居中必须靠 line-height 或 padding 硬调，稍一改尺寸就错位。
为什么 float 布局在导航栏里容易出问题
常见错误现象包括：.header 高度塌陷（看不到背景色）、nav 跑到下一行、Logo 和菜单上下不对齐、缩放后间距错乱。根本原因是 float 把元素移出文档流，父容器无法自动包裹子项，必须手动加 overflow: hidden 或伪元素清除，而这些技巧在现代项目中既冗余又脆弱。
-
float: left的<img>和float: right的<ul></ul>本质是“抢位置”，不是“分区域”，一旦中间加个搜索框或用户头像，整个布局就得重写 - 所有菜单项用
float: left并靠margin-right间隔，会导致最后一项右侧多出空白，且无法响应式收缩 -
line-height: 80px这类垂直居中 hack 只对单行文本有效；换行、图标、SVG 就失效
如果非要用 float，至少保证这三点
仅限维护老项目或兼容 IE8–9 场景。核心是让父容器“感知”浮动子项，并强制对齐基准线：
- 给
.header加overflow: hidden或::after伪元素清除浮动，否则高度为 0 - Logo 和菜单容器都设固定高度（如
height: 60px），并用line-height: 60px对齐文字；图片用vertical-align: middle - 菜单
<ul></ul>设float: right，内部<li>用float: left+margin-left（不是margin-right），避免最右项外溢
示例关键片段：
.header {
height: 60px;
overflow: hidden;
}
.logo {
float: left;
height: 60px;
}
.nav {
float: right;
height: 60px;
}
.nav ul {
margin: 0;
}
.nav li {
float: left;
margin-left: 20px;
}
.nav a {
display: block;
line-height: 60px;
padding: 0 12px;
}
真正该用的替代方案：Flexbox 一行代码解决
把 float 全换成 display: flex，不用清浮动、不用算 line-height、天然支持响应式。关键在于结构语义化：
- 不要把 Logo 和菜单塞进同一个
<ul></ul>；分开成<div class="nav-left"> 和 <code><div class="nav-right"> <li> <code>.header设display: flex+align-items: center，垂直居中自动生效 - 用
justify-content: space-between直接推两边，中间留白，比 float 更直观可靠
等效代码：
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.nav-left img {
height: 40px;
}
.nav-right ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-right li {
margin-left: 24px;
}
复杂点不在怎么写，而在要不要继续迁就 float —— 它不是“还能用”，而是“随时会断”。哪怕只改一个页面，也建议用 Flexbox 重写结构，否则后续加暗黑模式、移动端折叠菜单、无障碍焦点管理，都会卡在 float 的旧逻辑里。
