title: Do "clear:both" and "overflow:hidden" work the same way to make a container wrap floated children?
body: <p>I have a div with floated children.</p>
  
  <p>I know I can stretch the height in the following 2 ways:</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>.container {
    border: 2px solid #ccc;
    margin-bottom: 250px;
  }
  
  .container-2::after {
    content: '';
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
  }
  
  .container-3 {
    overflow: hidden;
  }
  
  .item {
    float: left;
    width: 200px;
    height: 50px;
    background: red;
    margin: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container container-1"&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container container-2"&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container container-3"&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I think they have the different principles: the <code>clear:both</code> <em>::after</em> element stays away from the float brothers, and force the parent div to stretch the height; the <code>overflow:hidden</code> style makes the div have the <em>BFC</em>, and according to <a href="http://www.w3.org/TR/CSS2/visudet.html#root-height" rel="nofollow">standard</a>, BFC will stretch its height to include its float children.</p>
  
  <p>The advantages and disadvantages are not important,but the how they works.</p>
  
  <p>Am I right, they are different but have the same result?</p>