title: Clear floats after every second div
body: <p>I have following HTML markup. There are two .item divs in a row, each of them having a different height.</p>
  
  <p>Is it possible to clear the floats after every second div without changing the markup? Every second div has the class .last-item.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
       &lt;div class="item last-item"&gt;&lt;/div&gt;
       &lt;div class="item"&gt;&lt;/div&gt;
       &lt;div class="item last-item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.wrap{
      border: 1px solid #000;
      width: 200px;
      overflow: hidden;
  }
  
  .item{
      width: 50%;
      background: yellow;
      margin-bottom: 10px;
      float: left;
  }
  </code></pre>
  
  <p><strong>Demo:</strong>
  <a href="http://jsfiddle.net/R7VHX/" rel="nofollow">http://jsfiddle.net/R7VHX/</a></p>