                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /从 psd 到 html

为什么那个价格右浮动之后就不见了

html

<div class="index-panel-body index-food-list">
<ul class="clearfloat">
<li class="food-item">
<a href="">
<img class="banner" src="images/demo2.jpg">
<div class="name">Fugiat nulla sint<span class="price">$30</span></div>
<div class="star-bar">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star nostar"></span>
</div>
</a></li>
</ul>
</div>
</div>

css

.index-food-list{
overflow: hidden;
}
.index-food-list ul{
width: 1160px;
}
.index-food-list.food-item{
float: left;
width: 230px;
margin-right: 60px;
}
.index-food-list .food-item .banner{
margin-bottom: 30px;
height: 202px;
}
.index-food-list .food-item .name{
color: #555;
font-size: 16px;
margin-bottom: 10px;
}
.index-food-list .food-item .price{
float: right;
}
.index-food-list .food-item .star-bar{
font-size: 0;
}
.index-food-list .food-item .star{
display: inline-block;
width: 12px;
height: 13px;
margin-right: 5px;
background-image:url("../images/index-star.png");
background-repeat:no-repeat;
}
.index-food-list .food-item .nostar{
background-position: 0 -13px;
}