浮动边距的解决方法没有折叠

Question

我们正在使用Bourbon Neat网格框架构建网站。它使用float: left进行列位置。

我们的网站结构包含行，其中可能包含一个或多个列。如果我们只有一列，则它不会浮动并且具有100％的宽度。名为组件的内容元素放置在可能浮动或不浮动的列中。

行可能具有白色背景颜色以用于突出显示。

组件的顶部和底部可能有边距，但并非所有组件都有。我们让边缘崩溃以保持内容的垂直节奏，而不会在其周围增加额外的空间。

我们的问题是浮动元素会创建自己的块格式化上下文，从而防止其边距崩溃。这会导致列间隙看起来很尴尬。参见示例：

左边是我得到的，右边是我想要的。

我们有什么办法可以彻底避开这个问题吗？如果没有纯CSS修复，Javascript解决方案就可以了。

body {
  background-color: #ccc;
}

p {
  margin: 1em;
}

.column {
  float: left;
  width: 33%
}

.white {
  background-color: #fff;
  padding: 1px 0;
  
}

.white + .white {
  padding-top: 0;
  margin-top: -1em;
}

<div class="row">
  <div>
    <p>
      These two
    </p>  
  </div>
</div>
<div class="row">
  <p>
    should collapse
  </p>
</div>
<div class="row white">
  <p>
    This should not collapse
  </p>
</div>
<div class="row">
  <p>
    These two
  </p>
</div>
<div class="row">
  <p>
    should collapse
  </p>
</div>
<div class="row white">
  <p>
      These white ones
  </p>
</div>
<div class="row white">
  <p>
      should collapse
  </p>
</div>
<div class="row">
  <div>
    <p>
      These two rows
    </p>  
  </div>
</div>
<div class="row">
  <div class="column">  
    <p>
      should collapse
    </p>
  </div>
  <div class="column">  
    <p>
      vertically
    </p>
    <p>
      Also, the column
    </p>
    <p>
      contents should
    </p>
    <p>
      have margins
    </p>
    <p>
      that collapse
    </p>    
  </div>
  <div class="column">  
    <p>
      with floats
    </p>
  </div>
</div>