Workaround for float margins not collapsing - html

Question

We're building a website using the Bourbon Neat grid framework. It uses float: left for column placement.
Our site structure consists of rows which may contain one or more columns. If we only have one column, it is not floated and has 100% width. The content elements called components are placed inside columns that may or may not float.
Rows may have a white background color for highlighting purposes.
Components may have margin at their top and bottom, but not all components do. We're letting the margins collapse to preserve the vertical rhythm of the content without adding extraneous space around it.
Our problem is that floating elements create their own block formatting context, preventing their margins from collapsing. This causes columns to have gaps that look awkward. See the example:
The left side is what I get, the right side is what I want.
Is there some way we could cleanly circumvent this problem? Javascript solutions are fine if there is no pure CSS fix.
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>