使用浮动和清除的基于列的网格（如 masonry.js）答案

【问题标题】：Column based grid (like masonry.js) using float and clear使用浮动和清除的基于列的网格（如 masonry.js）
【发布时间】：2016-01-29 07:19:00
【问题描述】：

您好，我想使用 float 和 clear 制作一个基于列的网格（两列）。

这个想法是给左块一个float：left和clear：left，同时给右块一个 float:right 和 clear:right。

.left-block {
    float: left;
    clear: left;
}
.right-block {
    float: right;
    clear: right;
}

但事实证明这是行不通的。你能告诉我为什么这不起作用吗？

Jsfiddle link

为什么one 能完美运行。

【问题讨论】：

标签： html css css-float masonry

【解决方案1】：

浮动元素不可能超过另一侧的前一个元素（因为它已被清除）。因此，仅使用浮点数无法获得正确的堆叠效果。

为了进一步了解浮动和清除的详细工作原理，我建议阅读specification。

到目前为止，在没有额外容器的情况下获得砌体布局的唯一方法是使用 CSS 列。你可以找到一个例子here。

【讨论】：

但是如果你打开我的 jsfiddle 链接，前三个左块堆栈很好，而第四个失败。这就是我不明白的。 this one 甚至可以完美运行。
@StefanusThobiSinaga left-blocks 的位置由right-blocks 的高度定义。 left-block 不能显示在它之前的 right-block 上方（在 html 中）。左边的第一个只是堆叠起来，因为第一个正在将左边的另外两个向下推。您的第二个示例仅在您添加更多容器 (jsfiddle.net/o0omhgmr/2) 之前有效。使用较小的容器（jsfiddle.net/144nyyas/1）更清楚。如果left-blocks 高于右侧，则行为将相同，只是在相反的一侧。

【解决方案2】：

我只是为您正在制作的 div 设置浮动，并在包含容器上添加清除，以便将其挡住。这在我的脑海中未经测试，但希望它有效。

CSS：

.wrapper {
    width: 70%;
}

.wrapperClear {
    content: "";
    display: table;
    clear: both;
}

.left-block {
    float: left;
    width: 50%;
}

.right-block {
    float: right;
    width: 50%;
}

HTML：

<div class="wrapper wrapperClear">
    <div class="left-block"></div>
    <div class="right-block"></div>
</div>

【讨论】：