浮动实现导航栏需对li设Float:left并清除ul浮动，推荐伪元素法：.nav-list::after{content:””;display:table;clear:both;}，同时li设margin-right、a设display:block以确保点击区域和间距。
用 css 浮动实现导航栏（即水平排列的列表），核心是让 <li> 元素脱离文档流并左对齐，同时清除浮动避免父容器塌陷。虽然现代开发更推荐 Flexbox 或 Grid，但理解浮动布局仍有实用价值，尤其在维护老项目或特定兼容场景中。
基础 html 结构
导航栏通常用语义化的 <nav></nav> 包裹无序列表：
<nav><br> <ul class="nav-list"><br> <li><a href="#home">首页</a></li><br> <li><a href="#about">关于</a></li><br> <li><a href="#service">服务</a></li><br> <li><a href="#contact">联系</a></li><br> </ul><br></nav>
关键 CSS 浮动写法
让列表项水平排列，需对 <li> 设置 float: left，并对 <ul></ul> 清除浮动：
- <li>移除默认列表样式：
list-style: none 和 margin/padding 归零
<li> <li> 设置 float: left，可加 margin-right 控制间距
<li> <ul></ul> 使用 overflow: hidden 或伪元素 ::after 清除浮动（推荐后者）
<li> <a></a> 设为 display: block，便于点击区域和内边距控制
推荐的清除浮动方案（伪元素法）
比 overflow: hidden 更稳妥，不干扰溢出内容：
立即学习“前端免费学习笔记（深入）”；
.nav-list {<br> list-style: none;<br> margin: 0;<br> padding: 0;<br>}<br>.nav-list li {<br> float: left;<br> margin-right: 20px;<br>}<br>.nav-list a {<br> display: block;<br> padding: 12px 16px;<br> text-decoration: none;<br> color: #333;<br>}<br>.nav-list::after {<br> content: "";<br> display: table;<br> clear: both;<br>}
响应式与交互增强（可选）
浮动布局本身不响应，需配合媒体查询和 hover 效果提升体验：
- <li>小屏幕下用
@media (max-width: 768px) 取消 float，恢复垂直堆叠
<li>给 a:hover 添加背景色或下划线，提升可访问性
<li>当前页高亮可用 class="active" 配合 CSS 精确控制
不复杂但容易忽略细节，比如忘记清除浮动导致父容器高度为 0、链接未设 block 导致点击热区过小。掌握这几步，浮动导航栏就能稳定可用。