清除浮动的方法有许多比较常用的是
.clear{zoom: 1;}
.clear:after{content: "";display: block;clear: both;}
after伪类元素末尾添加内容Ie6,7不兼容可以用zoom来解决（zoom缩放会触发ie下的haslayout使元素根据自身内容计算宽高但火狐不支持但可以通过after伪类解决）
两者结合解决的浏览器不兼容的问题；
ie6下li标签的部分兼容性问题：
可以通过给li标签加
vertical-align: top;解决在ie67下的4px间隙问题及左右两列布局Ie67下的折行问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul{margin: 0px;padding: 0px;} li{list-style: none;} a{text-decoration: none;} .nav{width: 496px;height: 177px;background: #f0f0f0;margin: 30px auto; position: relative;} .clear{zoom: 1;} .clear:after{content: "";display: block;clear: both;} .nav ul{display: inline; position: absolute;left: 40px;top:60px;} .nav li{float: left;vertical-align: top;} .nav li a{ display: block; height: 40px; border: 1px solid #f06000; padding: 0px 15px; margin:0 0 0 -1px; font-size: 14px; line-height:40px; position:relative; z-index: 0; float: left; } .nav li a:hover{ border: 1px solid #000000; z-index: 1; } </style> </head> <body> <div class="nav clear"> <ul class="clear"> <li><a href="#">首页</a></li> <li><a href="#">欢迎你</a></li> <li><a href="#">欢迎大家！</a></li> <li><a href="#">欢迎大家！！</a></li> <li><a href="#">导航栏</a></li> </ul> </div> </body> </html>