title: How to clear floats properly in twitter bootstrap?
body: <p>I've just started learning <code>twitter bootstrap</code> and I was wondering what the correct method is to clear floats with it.</p>
  
  <p>Normally I would just do something like this:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="main"&gt;&lt;/div&gt;
      &lt;div class="sidebar"&gt;&lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.clear {
      clear: both;
  }
  
  .main {
      float: left;
  }
  
  .sidebar {
      float: right;
  }
  </code></pre>
  
  <p>Please ignore the infrastructure of the above as it's just an example.</p>
  
  <p>Now say in <code>bootstrap</code> if I am trying to float some text next to a nav section what is the correct way of doing that?</p>
  
  <p>Consider this example in <code>bootstrap</code>:</p>
  
  <pre><code>&lt;div class="main_container"&gt;
  
      &lt;header id="main_header" class="col-md-12"&gt;
  
          &lt;nav class="navbar navbar-default" role="navigation"&gt;
  
          &lt;/nav&gt;
  
          &lt;div class="contact"&gt;
  
          &lt;/div&gt;        
  
      &lt;/header&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am wanting to float the <code>contact</code> field next to the <code>navbar</code> field.</p>
  
  <p>I have read about bootstrap's <code>.clearfix</code> class, do I just apply this as I have done above (after the floats)? ....or should I apply the class to something else?</p>