為什么 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;
}
2018-10-09
最后的
.header-nav li.item{
????clear: both;
????background: #006dcc;
}
這部分的問題
去掉就可以了，之前加過浮動后又直接清除掉了，所以沒生效