CSS“选择性”清除浮动

Question

我有一堆我向左浮动的街区。它们的高度各不相同;有些矮，有些高。

现在，这些块是动态生成的，因此无法预测每个块的高度（或者有多少块）。但是，需要灵活，所以如果这些块不能完全适合一行，那么我需要第二行。

问题：由于块的高度不同，任何溢出到下一行的块都会“嵌套”在现有的浮点数中：

我需要溢出块来形成自己的行：

我知道这是正确的行为（浮动支持更高的位置而不是左边的位置），但对此最好的解决方案是什么？我可以更改HTML结构（显然是任何CSS），但我无法在clear: left中进行硬编码。

Here's a jsFiddle.

Answer 1

在块上使用display: inline-block;保存float以了解实际需要在元素周围包装文本的情况。

结果：http://jsfiddle.net/EQyVy/18/