title: What does overflow: hidden do for ul tag?
body: <p>I'm creating a multiple column list using the directions from this article:</p>
  
  <p><a href="http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/" rel="noreferrer">http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/</a></p>
  
  <p>In a nutshell, it says to do something along the lines of this:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='block'&gt;
    &lt;ul&gt;
      &lt;li&gt;
        Item1
      &lt;/li&gt;
      &lt;li&gt;
        Item2
      &lt;/li&gt;
      &lt;li&gt;
        Item3
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.block {
      border: 1px solid black;
      padding: 10px;
  }
  .block ul {
      width: 100%;
      overflow: hidden;
  }
  .block ul li {
      display: inline;
      float: left;
      width: 50%;
  }
  </code></pre>
  
  <p>And it works wonderfully, but I was mind-boggled at the overflow:hidden CSS declaration.</p>
  
  <p>Without it, my outer div collapses like so:</p>
  
  <p><a href="http://jsfiddle.net/alininja/KQ9Nm/1/" rel="noreferrer">http://jsfiddle.net/alininja/KQ9Nm/1/</a></p>
  
  <p>When it's included, the outer div behaves exactly as how I would want it to be:</p>
  
  <p><a href="http://jsfiddle.net/alininja/KQ9Nm/2/" rel="noreferrer">http://jsfiddle.net/alininja/KQ9Nm/2/</a></p>
  
  <p>I'm wondering why overflow: hidden is triggering this behaviour.  I would expect it to cutoff the inner li items instead of forcing the outer div to expand to the necessary height.</p>
  
  <p>Thank you for looking!</p>