为什么 item类的 float：left 不生效？
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/reset.css" />
</head>
<body>
<div class="public-header">
<div class="public-container" >
<div class="header-logo"></div>
<ul class="header-nav">
<li class="item "><a href="#">Our Story</a></li>
<li class="item"><a href="#">Menu</a></li>
<li class="item"><a href="#">Reservations</a></li>
<li class="item"><a href="#">News</a></li>
<li class="item"><a href="#">Rviews</a></li>
</ul>
</div>
</div>
<div class="public-container index-banner"></div>
<div class="public-container index-list"></div>
<div class="public-container index-pannel">
<div class="public-container index-pannel-header">Featured Dishes</div>
</div>
<div class="public-container index-pannel">
<div class="public-container index-pannel-header">Featured Dishes</div>
</div>
<div class="public-footer">
<div class="public-container">123456789</div>
</div>
</body>
</html>
css:
index.css
body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,input,form,a,p,textarea{
margin: 0;
padding: 0;
font-family: helvetica,arial,sans-serifs;
}
ol,ul,li{
list-style: none;
}
a{
text-decoration: none;
display: block;
}
img{
border: none;
display: block;
}
.clearfloat{
zoom:1;
}
.clearfloat{
display: block;
clear: both;
content: "";
visibility: hidden;
height:0;
}
common.css
.public-header{
height:110px;
background: #ffffff;
}
.public-container{
position: relative;
margin: 0 auto;
background: #006dcc;
}
.public-header .header-logo{
float: left;
width: 182px;
height: 54px;
background: url("../img/public-header-logo.png");
margin-top: 40px;
}
.public-header .header-nav{
float: right;
font-size: 14px;
}
.public-header .header-nav li.item{
float: left;
color: #3b3b3b;
margin-top: 44px;
}
.public-footer{
height: 318px;
background:#3b3b3b;
}
.header-nav li.item{
clear: both;
background: #006dcc;
}
