title: Using :after to clear floating elements
body: <p>I have a list and the li's have a <code>float:left;</code>. The contents after the <code>&lt;ul&gt;</code> should be aligned correctly. Therefore i can build the following:</p>
  
  <p><a href="http://jsfiddle.net/8unU8/" rel="noreferrer">http://jsfiddle.net/8unU8/</a></p>
  
  <p>I thought, that I can remove the <code>&lt;div class="clear"&gt;</code> by using pseudo selectors like :after.</p>
  
  <p>But the example is not working:</p>
  
  <p><a href="http://jsfiddle.net/EyNnk/" rel="noreferrer">http://jsfiddle.net/EyNnk/</a></p>
  
  <p>Do I always have to create a separate div to clear floating elements?</p>