Correct approach to clear row in singularitygs using isolation

Question

I have a 2 column grid and two divs which I both want to span a single column starting in the first column. I want these to stack on top of each other but they are being overlayed on top of each other. Here is the scss:

#first {
  background: red;
  height: 30px;
  @include grid-span(1, 1);
}

#second {
  background: red;
  height: 30px;
  @include grid-span(1, 1);
}

I've fixed it by inserting an additional div between these two divs and using @include clearfix; or alternatively I can fix it by using @include isolate-span(2,1,'both'); on the second div.

Is there a more 'best practice' way of clearing a row like this?

Answer 1

As discussed in this similar question, Singularity doesn't clear your floats for you when you're using Isolation output (isolation being when each float is isolated from one another's position, as opposed to float where they are not).

The short version of that answer is to use the CSS clear property, as explained very well in the Mozilla Developer Docs