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/

Answer 2

No, you don't it's enough to do something like this:

<ul class="clearfix">
  <li>one</li>
  <li>two></li>
</ul>

And the following CSS:

ul li {float: left;}


.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
}

Answer 3

This will work as well:

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} 

.clearfix:after {
    clear: both;
}

/* IE 6 & 7 */
.clearfix {
    zoom: 1;
}

Give the class clearfix to the parent element, for example your ul element.

Sources here and here.