强制浮动元素以新行开始

Question

我有一个带有浮动<li>元素的列表，高度不同，这就是问题所在。我知道我知道这是另一种选择，display:inline-block但这个属性增加了额外的空间，我不知道为什么。

我的css：

ul {
    padding:0;
    margin:0;
    list-style:none;
    width:700px;
}

ul li {
    float:left;
    border:1px solid #000;
    width:24%;
    margin:0 0.3% 20px 0.3%;
    font-size:11px;
}

.yellow {
    background:yellow;
}

在线预览：http://jsfiddle.net/f3CA3/1/

Answer 1

你可以清除双方：

clear:both;

或者

clear:right;

仅作为一个例子，也可以;

clear:left;