Using :after to clear floating elements

Question

I have a list and the li\'s have a float:left;. The contents after the

should be aligned correctly. Therefore i can build the following:

Answer 1

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.