还有一个更好的方法
.clear:after{
content: "."
display: block
height: 0
clear: both
visibility: hidden
}
.clear{display: inline-table}
/* Hides from IE-mac \*/
* html .clear{height: 1%}
.clear{display: block}
/* End hide from IE-mac */
自己去琢磨吧
CSS有float:left和float:right，但能否实现float:center呢？水平居中浮动，当然是可以的，这里将介绍你实现方法。以下面的Li列表为例，我们要实现中间LI的居中浮动：
1 <div id="macji">
2 <ul class="macji-skin">
3 <li>列表一</li>
4 <li>列表二</li>
5 <li>列表三</li>
6 </ul>
7 </div>
我们需要先了解下position:relative属性，它是指left、right、top、bottom等中的偏移位置。我们可以让ul为position:relativeleft:50%，再让li向左浮动，再让position:relativeright:50%（或者left:-50%），那么li就会向中间浮动一样居中了。不相信的可把下面的CSS定义结合上边的代码拷贝到HTML测试。
view source
01 #macji{
02 position:relative
03 width:100%
04 height:80px
05 background-color:#eee
06 text-align:center
07 overflow:hidden
08 }
09 #macji .macji-skin{
10 float:left
11 position:relative
12 left:50%
13 }
14 #macji .macji-skin li{
15 position:relative
16 right:50%
17 float:left
18 margin:10px
19 padding:0 10px
20 border:solid 1px #000
21 line-height:60px
22 }
虽然这样用有些麻烦，但对于一个优秀的前端设计师，这个技巧还是有必要掌握的哦。
背景图片路径错误。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<title>jQuery模拟select控件</title>
<style type="text/css">
.header{
width:1000px
height:86px
background:url(../bg1/bg.png) repeat-x
z-index:-1
}
.logo{
float:left
margin-top:3px
margin-bottom:0px
width:380px
z-index:0
}
.xiala{
float:right
margin-top:-10px
width:200px
font-family:黑体
margin-right:30px
margin-left:auto
text-align:right
z-index:0
}
#daohang{
float:right
width:550px
margin-bottom:12px
}
#daohang li{
float:left
}
#daohang ul{
list-style-type:none
}
#daohang li a{
width:80px
text-align:center
display:block
text-decoration:none
border-left:1px solid #999
margin:1px
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="../bg1/bg_left_top2.png" />
</div>
<div class="xiala"><!--这部分是下拉菜单-->
<form method="post" style="width:200pxtext-align:center">
<p><label for="xiala">哈贝利日化：</label>
<select name="xiala" id="xiala">
<option value=" http://www.shhbl.cn/ " class="zonggongsi">总公司</option>
<option value=" http://www.dlhbl.cn/ " class="dlhbl">大连分公司</option>
<option value=" http://coco8558.b2b.hc360.com/ " class="bjhbl">北京分公司</option>
</select></p>
</form>
</div>
<div id="daohang">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">企业简介</a></li>
</body>
</html>
