为什么中间的line没有跟着浮动？

<div class="public-container menu-list">
    <ul class="clearfloat">
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Voluptate cillum fugiat.</h4>
                <p class="comment">Cheese, tomato, mushrooms, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$50</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Arcu pede enim justo.</h4>
                <p class="comment">Tuna, Sweetcorn, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$45</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Metus varius laoreet.</h4>
                <p class="comment">Chicken, mozzarella cheese, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$62</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Cras dapibussemper nisi.</h4>
                <p class="comment">Pineapple, Minced Beef, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$32</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Donec sodales magna.</h4>
                <p class="comment">Tuna, Sweetcorn, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$25</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Quam semper libero.</h4>
                <p class="comment">Cheese, tomato, mushrooms, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$15</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Saugue velit cursus.</h4>
                <p class="comment">Pineapple, Minced Beef, Cheese.</p>
            </a>
            <div class="line"></div>
            <div class="price">$30</div>
        </li>
        <li class="menu-item clearfloat">
            <a class="tile">
                <h4>Nam eget dui Etiam.</h4>
                <p class="comment">Chicken, mozzarella cheese, onions.</p>
            </a>
            <div class="line"></div>
            <div class="price">$35</div>
        </li>
    </ul>
</div>

.index-menu .menu-list{
    margin-top:150px;
    color:#555;
    overflow:hidden;
}

.index-menu .menu-list ul{
    width:1160px;
}

.index-menu .menu-item{
    float:left;
    width:520px;
    margin-right:60px;
    margin-bottom:56px;
}

.index-menu .menu-item .title, .index-menu .menu-item .line{
    float:left;
}

.index-menu .menu-item .price{
    float:right;
}

.index-menu .menu-item .title{
    width:230px;
    color:#555;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.index-menu .menu-item .comment{
    margin-top:4px;
    color:#b7b7b7;
    font-size:12px;
}

.index-menu .menu-item .line{
    margin-top:10px;
    width:192px;
    border-top:1px solid #e3e1e1;
}