如何阻止浮动内容推送下面的所有内容？

Question

我正在处理一个横跨多行浮动多个框的布局，我想知道如何以允许每个框浮动到顶部的方式执行此操作，除非上面有某些内容把它推倒。

此刻，如果右上方的方框比左上方的方框高，则下方的两个方框都被按下，而不是只有高大的方框下方的方框。这会导致左上方和左下方框之间出现奇怪的差距。

这些方框也可能有不同的宽度。

这是一个JSFiddle的链接，对于上下文，下面是我将应用此布局的实际网页。

小提琴： https://jsfiddle.net/t0tmzk0q/3/

网页： http://www.lucieaverillphotography.co.uk/work-3/

<div class="row">
  <div class="module" id="one"></div>
  <div class="module" id="two"></div>
  <div class="module" id="three"></div>
  <div class="module" id="four"></div>
</div>

html,
body {
  height:100%;
  background:pink;
}

.row {
  position:relative;
  width:85%;
  height:100%;
  margin: 0 auto;
} 

.module {
  width:47.5%;
  display:inline-block;
  float:left;
  height:200px;
  margin-bottom:35px;
  background:lightblue;
}

#one.module {
  margin-right:5%;
}

#two.module {
  height:300px;
}

#three.module {
  width:40%;
  margin-right:5%;
}

#four.module {
  width:55%;
}