title: How to putting clearfix after third div?
body: <p>I have boxes which size is 33.33% that is why 3 boxes are making 100% totaly.when I added fourth div and my 4th div is slipping whenever I putted .clearfix my problem is over..but I want to put clearfix every each 3rd div
  thanks.
  ok.. @AndreiGheorghiu my codes;</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>.ref-box {
    position: relative;
    width: 30%;
    float: left;
    margin: 10px 3.3% 10px 0;
  }
  .ref-item {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 7px;
    color: #FFFFFF;
    background: rgba(242, 102, 81, .8);
  }
  .ref-box figure a img {
    display: block;
    max-height: 100%;
  }
  .ref-box:nth-child(3n+3):after {
    content: "";
    display: table;
    clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="ref-box"&gt;
    &lt;figure&gt;
      &lt;a href="works/Facebook/index.html" title="created html-css" target="_blank"&gt;
        &lt;img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive"&gt;
      &lt;/a&gt;
    &lt;/figure&gt;
    &lt;div class="ref-item"&gt;
      &lt;span class="ref-head"&gt;Facebook Clone&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- every ref item--&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>copy this code more than one and see the result </p>