【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )

/* 清除默认的列表样式和内外边距 */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
/* 设置导航栏链接的默认样式 */
nav ul li a {
    display: block; /* 将链接显示为块级元素 */
    padding: 5px 10px; /* 设置内边距 */
    text-decoration: none; /* 移除下划线 */
    color: #000; /* 设置文本颜色 */
    border-radius: 5px; /* 圆角边框 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡效果 */
}
 
/* 鼠标悬停时的样式变化 */
nav ul li a:hover {
    background-color: #555; /* 背景颜色变深 */
    color: #fff; /* 文本颜色变亮 */
}
 
/* 设置当前活动链接的样式 */
nav ul li a.active {
    background-color: #007bff; /* 背景颜色变蓝 */
    color: #fff; /* 文本颜色变亮 */
}
 
/* 浮动导航栏模块至左侧 */
nav ul li {
    float: left; /* 向左浮动 */
}
 
/* 清除浮动 */
nav ul::after {
    content: "";
    display: table;
    clear: both;
}

这段代码为导航栏模块设置了浮动布局，使得导航链接并排显示。同时，它还展示了如何去除列表的默认样式，并为链接设置了基本的样式和悬停效果。最后，使用了::after伪元素来清除浮动，确保父元素能够包含浮动的子元素。