title: Prevent floating UL and LI elements underneath a header
body: <p>Below is a menu inside a header. The ul and li elements are floating and are now floating underneath the header, which I've tried to prevent with clear:both. However, that doesn't seem to work so I wonder... what can be wrong?</p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;header&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href='#'&gt;Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;Item 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;Item 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class='clear'/&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre><code>header {
      background: #888;
      height: 20px;
      padding: 10px;
  }
  
  ul{
    margin: 18px 0;
    padding: 0;
    list-style: none;
  }
  
  ul li{
    margin: 0 10px 0 0;
    padding: 0;
    display: block;
    float: left;
    width: 80px;
    height: 20px;
    border: 1px solid #000;
    background: red;
  }
  
  ul li a{
    display:block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    float: left;
    text-align: center;
    padding-top: 2px;
  }
  
  ul li a:hover{
    color: #fff;
    background-color: #000;
  }​
  
  .clear {
      clear:both;
  }
  </code></pre>