使用float实现导航栏水平排列，首先构建ul+li结构，通过float:left使列表项左浮动并排显示，再用margin调整间距并清除最后一项多余空白，最后通过overflow:hidden或伪类after清除浮动，防止父容器塌陷，实现兼容性好的传统水平导航布局。
要在CSS中实现导航栏的浮动对齐，通常使用 float 属性让列表项（li）水平排列，并通过 margin 调整间距和整体对齐效果。以下是具体操作流程：
1. 基础HTML结构
导航栏一般使用无序列表 ul 和列表项 li 构建，结构清晰且语义化：
<nav><ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
2. 使用 float 让 li 水平排列
默认情况下，li 是块级元素，会垂直堆叠。通过设置 float: left，可以让它们向左浮动并排显示：
nav ul {list-style: none;
padding: 0;
margin: 0;
}
nav li {
float: left;
}
此时所有 li 会从左到右依次排列，形成水平导航栏。
立即学习“前端免费学习笔记（深入）”；
3. 使用 margin 调整间距与对齐
通过 margin 控制每个菜单项之间的距离，使布局更美观：
nav li {
float: left;
margin-right: 20px;
}
给每个 li 添加右侧外边距，形成统一间隔。如果希望最后一项不产生多余空白，可以单独清除：
nav li:last-child {margin-right: 0;
}
4. 清除浮动避免布局问题
浮动元素脱离文档流，可能导致父容器高度塌陷。需清除浮动：
nav ul {overflow: hidden;
}
或使用伪类清除：
nav ul::after {content: "";
display: table;
clear: both;
}
基本上就这些。通过 float + margin 组合，能快速实现简洁的浮动导航栏布局，兼容性好，适合传统布局需求。
