title: Bootstrap: Floated divs cause parent elements to collapse. Best way to structure nested columns?
body: <p>I'm really struggling with Bootstrap regarding the way it handles divs.</p>
  <p>It seems to me, that all column classed divs using Bootstrap CSS are floated. For example:</p>
  <pre><code>&lt;div class=&quot;col-md-3&quot;&gt;
     property
  &lt;/div&gt;
  </code></pre>
  <p>This above div has the style: <code>float: left;</code> as defined in Bootstrap CSS.</p>
  <p>Now everyone knows about the issue with floating, it causes the parent div to not expand to the height because it doesn't 'see' floated elements as pushing out the container.</p>
  <p>I feel like this is a serious flaw in Bootstrap. I have some classes to add margin to divs, for example:</p>
  <pre><code>.full-buffer{margin:20px 0}
  </code></pre>
  <p>If I want to use this class on a div that wraps a number of Bootstrap columns, it doesn't work. Because the div has no height. If I wanted to add a background colour, it won't show up. For example:</p>
  <pre><code>.background-coloured-div{background-color:#0F0;}
  
   &lt;div class=&quot;background-coloured-div&quot;&gt;
                  &lt;div class=&quot;col-md-3&quot;&gt;
                      property
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md-3&quot;&gt;
                      property
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md-3&quot;&gt;
                      property
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md-3&quot;&gt;
                      property
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  <p>The above won't show any background colour, because all of the divs inside are floated, so it'll collapse to <code>0px</code> in height.</p>
  <h2><a href="https://jsfiddle.net/8vdpztbx/" rel="nofollow noreferrer">JSFiddle without bootstrap</a></h2>
  <h2><a href="https://jsfiddle.net/8vdpztbx/1/" rel="nofollow noreferrer">JSFiddle with bootstrap</a> - fixes one problem and causes another</h2>
  <p>So, what's the proper way to use Bootstrap columns? If everything is floated, how can you add proper margins, background colours etc to parent divs? <strong>Isn't this a massive flaw of the whole system?</strong></p>