Isolation Mode - Clearing and Creating a new Row

Question

Okay - I've read John Albin Wilkins http://palantir.net/blog/responsive-design-s-dirty-little-secret - and I now understand the motivation for the 'isolation' mode (and how it's implemented).

I then read Sam's initial rebuttal of isolation mode, although he's updated his post to say that he's coming 'round to the idea (or that at least he understands the motivation for it) - http://snugug.com/musings/on-responsive-designs-dirty-little-secret

If I've understood all of this correctly, one enhancement that Singularity offers over Zen grids, is that it allows you to mix output styles (for example you could switch to float output in the middle of a layout using the @import layout mixin).

However, in isolation mode - I'm still not clear on how you 'clear a row' - as John Albin Wilkins mentions in his post...

While floated items with this technique can no longer see each other’s right edge, they can still see their bottom edges when clearing. And it means you can start a new row of grid items by simply clearing the previous grid items and this new row will be positioned below all the previous content.

Let's say I have a section and inside that I have 6 articles - and I want all of the articles to occupy 1 column of a two column grid in the section.

grid-span(1,1)
grid-span(1,2)
/* next row */
grid-span(1,1)
grid-span(1,2)
/* next row */
grid-span(1,1)
grid-span(1,2)

Maybe I'm obsessing a little with row clearing, although I confess that with this occurring 'naturally' in a float output, and with Sam latching on to it in his post, and with neither post describing exactly 'how' you clear the row in isolation mode without using a clearfix container, my curiosity is piqued.

Answer 1

To clear a row, use clear: both on the first item of the row.

Note that Singularity isolation span mixin applies clear: right, so you have to apply your clear: both after the span mixin:

.foo
  +grid-span(1, 1)

.bar
  +grid-span(1, 2)

.baz
  +grid-span(1, 1)
  clear: both

.quux
  +grid-span(1, 2)

For more background info on clearing, read this answer: Layout using Singularity