css float的问题？

盒子被卡起了是什么原因呢，以前记得见过这样的问题，但是现在想不起来了，请问该怎么做啊？

<div class="catBox clearfix">
    <div class="catBoxItem ">
        <a href="http://m.example.com//">职业选择</a>
    </div>
    <div class="catBoxItem ">
        <a href="http://m.example.com//">JavaScript教程</a>
    </div>
    <div class="catBoxItem ">
        <a href="http://m.example.com//">MySQL教程</a>
    </div>
    <div class="catBoxItem ">
        <a href="http://m.example.com//">Linux教程</a>
    </div>
    <div class="catBoxItem ">
        <a href="http://m.example.com//">Python教程</a>
    </div>
    <div class="catBoxItem ">
        <a href="http://m.example.com//">HTML|CSS教程</a>
    </div>
</div>

.catBox{
    width: 100%;
}
.catBoxItem{
    width: 49%;
    float: left;
    border: none;
    padding: 0;
    margin: 5px 0 0 0;
}
.clearfix:after,.clearfix:before{
    content: '';
    display: block;
    clear: both;
}