title: Bootstrap clearfix mixin doesn't help in my case (to simplify HTML)
body: <p>Here is some HTML using Bootstrap:</p>
  
  <p>Code block <strong>#1</strong></p>
  
  <pre><code>&lt;div style="border:1px solid red;"&gt;
    &lt;div class="clearfix" style="border:1px solid blue;"&gt;
      &lt;h3&gt;block#1 and block#2 should look the same way
      &lt;/h3&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to remove <code>&lt;div class="clearfix"&gt;</code> (and probably use .clearfix() mixin) to simplify HTML like this:</p>
  
  <p>Code block <strong>#2</strong></p>
  
  <pre><code>&lt;div style="border:1px solid red;"&gt;
      &lt;h3&gt;block#1 and block#2 should look the same way
      &lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, I'm unable to reach the same look even with using .clearfix().</p>
  
  <p>Any suggestions how to make the <strong>block #2</strong> to look on the page as <strong>block #1</strong> with bootstrap mixins?</p>
  
  <p>P.S. Of course the inline border styles are used to see paddings and placed here temporary.</p>
  
  <p>I've tried this but it doesn't help:</p>
  
  <pre><code>&lt;div style="border:1px solid red;"&gt;
    &lt;h3 style="border:1px solid green;"&gt;block#1 and block#2 should look the same way
    &lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With this <strong>CSS applied</strong>:</p>
  
  <pre><code>h3 {
    .clearfix();
  }
  </code></pre>
  
  <p><strong>unfortunately it looks not as #block1.</strong></p>
  
  <p><a href="https://jsfiddle.net/zdex771m/" rel="nofollow">JSFiddle is here</a></p>