title: How to stack floated elements out of order
body: <p>I have a responsive site with two columns.  The elements in each column are of variable height, so I don't think I can use CSS grid.  I want the elements on both sides of the page to stack up vertically without a gap between them.  When the screen size is reduced, I want the <code>div</code>s to remain in order and collapse into one column, so I can't put the elements in two separate containers.</p>
  
  <p>Right now, each right hand column element is flush with the top of the preceding (longer) left hand column elements.  I don't understand why this is, as I thought floated elements were taken out of the flow.</p>
  
  <p>Is there a way to get what I want?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.left {
    background-color: green;
    border: 1px solid black;
    width: 300px;
    height: 600px;
    float: left;
    clear: left;
  }
  
  .right {
    background-color: yellow;
    border: 1px solid black;
    width: 300px;
    height: 300px;
    float: right;
    clear: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="left"&gt;
  
  &lt;/div&gt;
  
  &lt;div class="right"&gt;
  
  &lt;/div&gt;
  
  &lt;div class="left"&gt;
  
  &lt;/div&gt;
  
  &lt;div class="right"&gt;
  
  &lt;/div&gt;
  
  &lt;div class="left"&gt;
  
  &lt;/div&gt;
  
  &lt;div class="right"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want two flush columns of boxes, with all the yellow boxes flush up against each other vertically.</p>