如何清除这些高度不同的浮动div？

Question

我有一个图片库，有时图片下方有一个标题，有时则没有。图像将始终具有完全相同的大小，但由于标题，块的总高度不同。

我尝试将其添加到块中，但它不起作用。

.image-block:nth-child(odd):after {
  content:"";
  display: table;
  clear: both;
}

如果我在第二个块之后手动添加div.clear，则可行。我不确定为什么在以下内容中明确添加它是不行的。

https://codepen.io/sharpdesigner/pen/VQRwxy