Using :after to clear floating elements
Write like this:
.wrapper:after {
content: '';
display: block;
clear: both;
}
Check this http://jsfiddle.net/EyNnk/1/
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%;
}