在网页开发中，导航栏是核心组件之一，很多时候我们需要将logo、首页等核心入口放在导航栏左侧，将登录、注册、个人中心等功能入口放在右侧，使用CSS的float浮动属性就能快速实现这种左右排列的效果。
一、基础HTML结构搭建
首先需要构建导航栏的基础HTML结构，通常我们使用nav标签作为导航栏容器，内部用无序列表ul包裹导航项li，为了区分左右排列的导航项，我们可以给对应的li添加不同的类名。
<nav class="navbar">
<ul class="nav-list">
<!-- 左侧导航项 -->
<li class="nav-item left-item">logo</li>
<li class="nav-item left-item">首页</li>
<li class="nav-item left-item">分类</li>
<!-- 右侧导航项 -->
<li class="nav-item right-item">登录</li>
<li class="nav-item right-item">注册</li>
</ul>
</nav>
二、CSS浮动属性设置
float属性的可选值有left、right、none，分别代表元素向左浮动、向右浮动、不浮动。我们给左侧导航项设置float: left，右侧导航项设置float: right，就能让两类导航项分别靠左、靠右排列。
同时需要给导航栏容器设置合适的高度和背景色，让导航栏显示更清晰，还要去掉ul和li默认的边距和列表样式。
/* 导航栏容器样式 */
.navbar {
width: 100%;
height: 60px;
background-color: #333;
/* 去掉默认内边距 */
padding: 0 20px;
/* 设置盒模型为border-box，避免padding撑大容器 */
box-sizing: border-box;
}
/* 导航列表样式 */
.nav-list {
/* 去掉默认外边距和内边距 */
margin: 0;
padding: 0;
/* 去掉列表默认的圆点样式 */
list-style: none;
/* 设置行高为导航栏高度，让文字垂直居中 */
line-height: 60px;
height: 60px;
}
/* 导航项通用样式 */
.nav-item {
/* 设置左右内边距，让导航项之间有间距 */
padding: 0 15px;
color: #fff;
/* 去掉a标签默认的下划线，这里如果是可点击导航可以嵌套a标签 */
text-decoration: none;
}
/* 左侧导航项左浮动 */
.left-item {
float: left;
}
/* 右侧导航项右浮动 */
.right-item {
float: right;
}
三、清除浮动避免布局错乱
当容器内部的子元素全部浮动后，容器会失去高度，导致后续的元素布局出现错乱，这种现象叫做高度塌陷。我们需要清除浮动来解决这个问题，常用的方案是给导航栏容器添加clearfix类。
clearfix的原理是在容器内部最后添加一个伪元素，设置clear属性清除左右浮动，让容器重新包裹浮动元素，恢复自身高度。
/* 清除浮动通用类 */
.clearfix::after {
content: "";
display: block;
clear: both;
/* 兼容旧版本浏览器 */
visibility: hidden;
height: 0;
}
/* 给导航栏容器添加clearfix类，在HTML中nav标签添加class="navbar clearfix"即可 */
四、完整示例代码
将前面的代码整合起来，就是完整的可运行示例，你可以直接复制到HTML文件中查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动实现导航栏左右排列</title>
<style>
.navbar {
width: 100%;
height: 60px;
background-color: #333;
padding: 0 20px;
box-sizing: border-box;
}
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.nav-list {
margin: 0;
padding: 0;
list-style: none;
line-height: 60px;
height: 60px;
}
.nav-item {
padding: 0 15px;
color: #fff;
}
.left-item {
float: left;
}
.right-item {
float: right;
}
</style>
</head>
<body>
<nav class="navbar clearfix">
<ul class="nav-list">
<li class="nav-item left-item">logo</li>
<li class="nav-item left-item">首页</li>
<li class="nav-item left-item">分类</li>
<li class="nav-item right-item">登录</li>
<li class="nav-item right-item">注册</li>
</ul>
</nav>
</body>
</html>
五、注意事项
- 浮动元素的排列顺序是先写的先浮动，所以右侧导航项如果有多个，先写的会靠右更近，后续写的会依次向左排列，符合正常的视觉逻辑。
- 如果导航项内部需要添加链接，可以在
li内部嵌套a标签，给a标签设置display: block，再把内边距设置到a标签上，提升点击区域大小。 - 如果导航栏需要适配移动端，可以结合媒体查询，在小屏幕下取消浮动，改为垂直排列或者横向滚动，提升移动端体验。
- 除了float浮动，现在也可以使用flex布局实现导航栏左右排列，不过float方案兼容性更好，适合需要适配旧版本浏览器的场景。
CSS浮动导航栏布局float属性clearfix清除浮动修改时间：2026-06-21 07:54:34