title: Float and block level elements
body: <p>Can anyone tell me why do the block level elements given float property does behave oddly? I want to understand what actually happens to an element[block or inline] when we give a float property.</p>
  
  <p>Below is the code and fiddle:</p>
  
  <pre><code>&lt;div class="container violet"&gt;
    &lt;div class="float red"&gt;float&lt;/div&gt;
    &lt;div class="foo blue"&gt;foo&lt;/div&gt;
    &lt;div class="bar green"&gt;bar&lt;/div&gt;
    &lt;div class="baz orange"&gt;baz&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.float {
    float: left;
  }
  .foo {
    padding-top: 10px;
  }
  .bar {
    width: 30%;
  }
  .baz {
    width: 40%;
  }
  
  .violet{
    background-color: violet;
  }
  .red{
    background-color: red;
  }
  .blue{
    background-color: blue;
  }  
  .green{
    background-color: green;
  }
  .orange{
    background-color: orange;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/gcazev14/" rel="noreferrer">http://jsfiddle.net/gcazev14/</a></p>
  
  <p>My curosity, it is still in the <strong>normal flow</strong> but its now positioned inside the <strong>foo[blue] block</strong></p>