為什么那個價格右浮動之后就不見了

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;
}

那里不對？而且banner不是橫著排列是豎著的