浮动可用于实现水平和垂直导航栏布局，通过float:left使列表项横向排列或纵向堆叠，配合overflow:hidden或伪类清除浮动以防止父容器塌陷，适用于旧项目维护或兼容性场景。
浮动（float）是CSS中一种经典的布局方式，虽然现代开发更多使用Flexbox或Grid，但在一些老项目维护或特定场景中，理解浮动实现导航栏仍具实用价值。本文通过水平与垂直导航栏的实例，讲解如何用
属性完成常见布局。
水平导航栏：使用 float: left 实现横向排列
水平导航栏是最常见的网站导航形式，通常由多个并排的菜单项组成。通过将列表项向左浮动，可让它们在同一行显示。
HTML结构一般如下：
CSS样式设置：
立即学习
“
前端免费学习笔记（深入）
”；
关键点：
使每个
元素靠左排列，
用于包含浮动元素，防止父容器塌陷。
垂直导航栏：使用 float: left 或直接块级堆叠
垂直导航常用于侧边栏，菜单项从上到下排列。虽然可用
自然堆叠，但结合
可更好控制布局流。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
HTML结构类似：
CSS实现方式：
这里给每个设置并占满宽度（），实现垂直堆叠效果。相比不浮动，这种方式在多列布局中更易与其他浮动区域配合。清除浮动与布局完整性使用浮动后必须处理“父容器塌陷”问题，即父元素无法自动包含浮动子元素的高度。常用方法包括：给父容器添加在最后一个浮动元素后插入清除元素：使用伪类清除：推荐使用伪类方式，既不影响结构，又能有效闭合浮动流。基本上就这些。尽管浮动已逐渐被新布局取代，但在理解CSS布局演进和维护旧代码时，掌握实现导航仍是基础技能。实际开发中建议优先考虑Flexbox，但在特定兼容性需求下，浮动方案依然可行。
float
.nav-horizontal {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden; /* 清除浮动影响 */
background-color: #333;
}
.nav-horizontal li {
float: left;
}
.nav-horizontal li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.nav-horizontal li a:hover {
background-color: #555;
}
float: leftlioverflow: hiddendisplay: blockfloat
.nav-vertical {
list-style: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f4f4f4;
border: 1px solid #ddd;
}
.nav-vertical li {
float: left;
width: 100%;
}
.nav-vertical li a {
display: block;
padding: 12px 16px;
text-decoration: none;
color: #333;
border-bottom: 1px solid #ddd;
}
.nav-vertical li a:hover {
background-color: #ddd;
}
lifloat: leftwidth: 100%overflow: hidden::after { content: ""; display: table; clear: both; }float