title: Why does my list's background-color disappear when I float its list elements?
body: <p>The moment I float my unordered-list element...the background color fails.  Why?</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
      .bkgrd-blue { background-color: #094AB2; }
  
      .application-bar { color: #FFFFFF; }
  
      .application-bar ul { }
      .application-bar ul.control-bar { list-style: none outside none; margin: 0; overflow: visible; padding: 0; }
  
      .application-bar ul.control-bar.branding { float: left;}
  &lt;/style&gt;
  
  &lt;div class="application-bar bkgrd-blue"&gt;
      &lt;ul class="control-bar"&gt;
          &lt;li&gt;
              This is working!
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="application-bar bkgrd-blue"&gt;
      &lt;ul class="control-bar branding"&gt;
          &lt;li&gt;
              The moment I float this...it fails! Why?
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>