title: Best Practice for CSS Clear or Overflow
body: <p>Having a discussion with a co-worker on what is best practice with CSS clear / overflow. Please shut one of us up and explain why one is better than the other.</p>
  
  <p>JOEL'S CODE (using overflow):</p>
  
  <pre><code>&lt;style&gt;
    .container { overflow: hidden; }
    .one, .two { float: left; width: 50px; height: 50px; background-color: red; }
  &lt;/style&gt;
  
  &lt;div class="container"&gt;
     &lt;div class="one"&gt;&lt;/div&gt;
     &lt;div class="two"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
     &lt;div class="one"&gt;&lt;/div&gt;
     &lt;div class="two"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
     &lt;div class="one"&gt;&lt;/div&gt;
     &lt;div class="two"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
     &lt;div class="one"&gt;&lt;/div&gt;
     &lt;div class="two"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CHRIS' CODE (using clear):</p>
  
  <pre><code>&lt;style&gt;
    .clear { clear: both; }
    .one, .two { float: left; width: 50px; height: 50px; background-color: red; }
  &lt;/style&gt;
  
  &lt;div class="container"&gt;
     &lt;div class="one"&gt;&lt;/div&gt;
     &lt;div class="two"&gt;&lt;/div&gt;
     &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
     &lt;div class="one"&gt;&lt;/div&gt;
     &lt;div class="two"&gt;&lt;/div&gt;
     &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
     &lt;div class="one"&gt;&lt;/div&gt;
     &lt;div class="two"&gt;&lt;/div&gt;
     &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
     &lt;div class="one"&gt;&lt;/div&gt;
     &lt;div class="two"&gt;&lt;/div&gt;
     &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Both make this image:</p>
  
  <p><img src="https://i.stack.imgur.com/9ajVw.png" alt="Properly positioned elements"></p>
  
  <p>Who is right? :)</p>