title: Floating elements causes the parent to collapse. HTML / CSS
body: <p>If I have the following code:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div style="float: left;"&gt;Div 1&lt;/div&gt;
      &lt;div style="float: left;"&gt;Div 2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The parent will collapse and appear to have a height of 0px.</p>
  
  <p>So this is a known issue I guess, and there are <a href="https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing">fixes</a> available, but I would really like to know <strong>WHY</strong> it happens in the first place.</p>
  
  <p>Could anyone explain it?</p>
  
  <p><strong>I'm not looking for any CSS fixes, they have been covered <a href="https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing">here</a>, I'm looking for an explanation as to why this occurs in the first place.</strong></p>