title: How to use the .clearfix class?
body: <p>I think I'm misunderstanding the concept of the <code>.clearfix</code> class. Maybe somebody can help me out.</p>
  
  <p>I'm looking for a way to use <code>float</code> and <code>clear</code> without messing up my markup. So I thought, that's where <code>.clearfix</code> can be used for.</p>
  
  <p>Inside of an empty H5BP-project, my markup looks like:</p>
  
  <pre><code>    &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Below the result. I was expecting a tic tac toe-field, though. Can somebody tell me:</p>
  
  <ol>
  <li>How I can achieve my goal and </li>
  <li>What the <code>.clearfix</code> class really can be used for?</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/BfVU3.png" alt=""></p>