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

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

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不是横着排列是竖着的