css网页导航案例：
<style>
*{
margin: 0;
padding: 0;
}
.nav{
margin: 50px auto;
width: 640px;
height: 50px;
background-color: #ffc0cd;
}
.nav ul{
list-style: none;
}
.nav li{
float: left;
}
.nav li a{
/* a 宽高不生效 display */
display: block;
text-decoration: none;
width: 80px;
height: 50px;
text-align: center;
line-height: 50px;
color: aliceblue;
}
.nav li a:hover{
background-color: green;
}
</style>
<div class="nav">
<ul>
<li><a href="#">news1</a></li>
<li><a href="#">news2</a></li>
<li><a href="#">news3</a></li>
<li><a href="#">news4</a></li>
<li><a href="#">news5</a></li>
<li><a href="#">news6</a></li>
<li><a href="#">news7</a></li>
<li><a href="#">news8</a></li>
</ul>
</div>css清除浮动方法：
<!-- 清除浮动是清除浮动给其他标签带来的影响 -->
<!--1. 父级元素需要加高 缺点是但有些不能加 -->
<!--2.额外标签 在父元素内容最后添加一个块级元素 或者给添加的块级元素设置clear:both 缺点是会使html界面变得复杂-->
<!--3.单伪元素清除法 代码不用背 项目准备的时候都需要复制粘贴到项目里
.clearfix::after{
content:'';
display:block;
clear:both;
} -->
<!-- 4.双伪元素 真正清除浮动的标签
.clearfix::brfore,
.clearfix::after{
content:'';
display:table;
}
.clearfix::after{
clear:both;
}-->
<!--5.给父元素设置overflow:didden 方便 -->
