•   
• 首页
•   
• 产品
•   
• 服务
•   
• 关于

.n*-horizontal {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 清除浮动影响 */
  background-color: #333;
}
.n*-horizontal li {
  float: left;
}
.n*-horizontal li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}
.n*-horizontal li a:hover {
  background-color: #555;
}

•   
• 仪表盘
•   
• 用户管理
•   
• 设置
•   
• 日志

.n*-vertical {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
}
.n*-vertical li {
  float: left;
  width: 100%;
}
.n*-vertical li a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #ddd;
}
.n*-vertical li a:hover {
  background-color: #ddd;
}
</font>

这里给每个li设置float: left并占满宽度（width: 100%），实现垂直堆叠效果。相比不浮动，这种方式在多列布局中更易与其他浮动区域配合。

清除浮动与布局完整性

使用浮动后必须处理“父容器塌陷”问题，即父元素无法自动包含浮动子元素的高度。常用方法包括：

• 给父容器添加overflow: hidden
• 在最后一个浮动元素后插入清除元素：<div style="clear: both;"></div>
• 使用伪类清除：::after { content: ""; display: table; clear: both; }

推荐使用伪类方式，既不影响结构，又能有效闭合浮动流。

基本上就这些。尽管浮动已逐渐被新布局取代，但在理解CSS布局演进和维护旧代码时，掌握float实现导航仍是基础技能。实际开发中建议优先考虑Flexbox，但在特定兼容性需求下，浮动方案依然可行。