html - Using :after to clear floating elements

Question

I have a list and the li's have a float:left;. The contents after the <ul> should be aligned correctly. Therefore i can build the following:

http://jsfiddle.net/8unU8/

I thought, that I can remove the <div class="clear"> by using pseudo selectors like :after.

But the example is not working:

http://jsfiddle.net/EyNnk/

Do I always have to create a separate div to clear floating elements?

Answer 1

Write like this:

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

Check this http://jsfiddle.net/EyNnk/1/