使用float属性可实现水平导航栏，通过将li元素左浮动并清除浮动避免布局塌陷，配合无序列表结构与块级链接样式，确保兼容性与点击区域，推荐用clearfix类清除浮动。
使用CSS的float属性可以实现水平导航栏，虽然现在有更现代的方法如Flexbox或Grid，但在一些老项目或需要兼容旧浏览器时，float仍是一种有效手段。关键是通过浮动让菜单项在同一行显示，并清除浮动带来的布局影响。
基本HTML结构
导航栏通常使用无序列表构建，语义清晰且易于样式控制：
<nav><ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
使用float实现水平排列
将每个列表项向左浮动，使它们并排显示：
- 设置 li { float: left; } 让每个菜单项左浮动
- 移除列表默认样式：list-style: none;
- 给 a 标签设置 display: block; 以增加点击区域
- 添加内边距和背景色提升视觉效果
margin: 0;
padding: 0;
list-style: none;
}
nav li {
float: left;
}
nav a {
display: block;
padding: 10px 15px;
background-color: #333;
color: white;
text-decoration: none;
}
nav a:hover {
background-color: #555;
}
清除浮动防止布局塌陷
浮动元素会脱离文档流，可能导致父容器高度异常。解决方法包括：
立即学习“前端免费学习笔记（深入）”；
- 在最后一个浮动元素后添加一个清除元素：
<div style="clear:both;"></div> - 给父容器添加 overflow: hidden; 触发BFC包含浮动
- 使用clearfix技巧（推荐）：
content: "";
display: table;
clear: both;
}
然后将这个类加到 ul 或 nav 上即可。
基本上就这些。用float做水平菜单不复杂但容易忽略清除浮动的问题。只要处理好结构和清除，就能稳定显示。
