Firefox ignores page-break-before when printing

I have a @media print{} section to tweak a site for printing. I'm forcing a page break before main blocks. However, elements overlap in Firefox (other browsers render everything as expected). As the following print preview illustrates, red block displays on top or previous content rather than jumping to page 3:

HTML structure is like this:

<div class="cols">
    <div class="col col1de2">This is the yellow block</div>
    <div class="col col2de2">This is the blue block</div>
</div>
<div class="extra">This is the red block</div>

... and this is the relevant CSS:

.cols{
    overflow: hidden;
}
.col{
    float: left;
    width: 40%;
}
.extra{
    page-break-before: always;
    clear: both; /* Attempted workaround: didn't work */
}

You can see in it action though you need to print JSFiddle's Result frame (possibly to a PDF printer—not sure about how to trigger Print Preview menu item in a frame).

Can you figure out a fix or workaround?

It is because of the float. page-break goes bonkers on floats. From your use-case, it seems Firefox is being extra finicky on this.

Option 1:

Remove float in your @media print styles, if you can make do with a single column.

The changes required would be (as per your fiddle):

@media print { 
    .col { float: none; width: auto; } /* remove the floats for print */
    .extra { page-break-before: always; } /* no change here */
}

Option 2:

Clear the floats not on the parent (actually it should have been on your inner parent though instead of outer one in your fiddle, not that matters here); but clear it on an extra div sibling of your .cols.

The changes required would be (as per your fiddle):

Markup

<div class="cols">
    <div class="col col1de2">Sed lacinia mi..</div>
    <div class="col col2de2"> Suspendisse sit amet..</div>
    <div class="clear"></div> <!-- clear the float here -->
</div>

CSS

.col { float: left; width: 40%; } /* no change here */
.clear { clear: both; } /* clear here */

To summarize: Make sure there are no floats or clearing floats immediately preceding or succeeding the element on which page-break-x is applied.