Css 强制浮动元素以新行开始

我有一个浮动

元素的列表，高度不同，这就是问题所在。我知道我知道还有另一种选择，

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

---

在线预览：

您可以通过以下方式清除侧面：

clear:both;

或许

clear:right;

举个例子，也可以是

clear:left;

---

仅使用CSS是不可能的。除了

显示：表-*

系列之外<代码>内联块的作用是：不要忽略空白（内联），而是充当块（尽可能水平扩展）。对于

内联块

和空白，请参见：类似于此的内容->？当没有任何内容浮动到右侧以清除时，为什么要

清除：右侧

？