title: What does the clearfix class do in css?
body: <p>I've seen <code>div</code> tags use a <code>clearfix</code> class when it's child <code>divs</code> use the <code>float</code> property. The clearfix class looks like this:</p>
  
  <pre><code>.clearfix:after {
      clear: both;
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
  }
  .clearfix {
      display: inline-block;
  }
  .clearfix {
      display: block;
  }
  </code></pre>
  
  <p>I found that if I don't use <code>clearfix</code> when I use the <code>bottom-border</code> property, the border would show above the child <code>divs</code>. Can someone explain what the clearfix class does? Also, why are there two <code>display</code> properties? That seems very strange to me. I am especially curious about what the <code>content:'.'</code> means.</p>
  
  <p>Thanks,G</p>