title: CSS: How to clear a floating object only one level, not the all the way to the left?
body: <p>Im not sure if im describing this correctly.
  I want an object among all floating objects to clear but not all the way to the left.</p>
  
  <p><a href="http://jsfiddle.net/db0xacps/" rel="nofollow"><strong>JSfiddle</strong></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#parent {
    background: greenyellow;
    width: 500px;
    height: 700px;
    padding: 15px;
  }
  #parent&gt;div {
    float: left;
  }
  #object1 {
    width: 40px;
    height: 300px;
    background: blue;
  }
  #object2 {
    width: 100px;
    height: 100px;
    background: red;
  }
  #object3 {
    width: 100px;
    height: 100px;
    background: purple;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parent"&gt;
  
    &lt;div id="object1"&gt;
  
  
    &lt;/div&gt;
    &lt;div id="object2"&gt;
  
    &lt;/div&gt;
    &lt;div id="object3"&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As in, in the jsfiddle. I want the purple box to come below red box.
  And no i dont want to reduce my parent's width.
  And i dont want to contain red and purple inside a div.</p>
  
  <p>Is there way for it.
  Thanks?</p>