title: Why absolute parent get child height while relative parent doesn't?
body: <p>I observed the behaviour that absolutely positioned parent will set its own height to cover child elements, while relatively positioned parent doesn't. I have created 2 jsfiddles to emulate this:</p>
  
  <p>Absolute:
  <a href="https://jsfiddle.net/kc1g7v9s/" rel="nofollow">https://jsfiddle.net/kc1g7v9s/</a></p>
  
  <p>Relative:
  <a href="https://jsfiddle.net/smy5q8Ld/" rel="nofollow">https://jsfiddle.net/smy5q8Ld/</a></p>
  
  <p>When inspect element on rendered result, the absolute-container div's dimension is 220x60, whereas relative-container div's dimension is 689x0.</p>
  
  <p>Why so? I'm not particularly trying to achieve anything, just curious on the behaviour.</p>
  
  <p>Code attached:</p>
  
  <p><strong>Absolute:</strong> </p>
  
  <pre><code>&lt;div class="absolute-container"&gt;
      &lt;div class="child1"&gt;&lt;/div&gt;
      &lt;div class="child2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .child1, .child2 {
      width: 100px;
      height: 60px;
      background-color: grey;
      margin-right: 10px;
  }
  .child1 {
      float: left;
  }
  
  .child2 {
      float: right;
  }
  
  .absolute-container {
      position: absolute;
      clear: both;
  }
  </code></pre>
  
  <p><strong>Relative:</strong></p>
  
  <pre><code>&lt;div class="relative-container"&gt;
      &lt;div class="child1"&gt;&lt;/div&gt;
      &lt;div class="child2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .child1, .child2 {
      width: 100px;
      height: 60px;
      background-color: grey;
      margin-right: 10px;
  }
  .child1 {
      float: left;
  }
  
  .child2 {
      float: right;
  }
  
  .relative-container {
      position: relative;
      clear: both;
  }
  </code></pre>