title: Why sometimes a parent element gets 0px height?
body: <p>I've started with HTML and CSS a couple weeks ago and this happened several times, and I don't know why.</p>
  
  <p>Sometimes I apply a background to the parent element, include something on it, but the <code>height</code> of the parent stays <code>0</code> instead receiving <code>height</code> of the children. And sometimes it does (which I believe should be the correct behavior no?)</p>
  
  <p>My glossarySelector gets <code>0</code> height. Therefore my background color is not displayed.</p>
  
  <pre><code>.glossarySelector {
    background: #EFEFEF; 
  }
  
  &lt;div class="glossarySelector"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;C&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;D&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;E&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Why?</p>
  
  <p>You can see the full code <a href="http://jsfiddle.net/gTKNk/3/" rel="nofollow">here</a>. </p>