What does the CSS rule “clear: both” do?

Question

What does the following CSS rule do:

.clear { clear: both; }

And why do we need to use it?

Answer 1

Mr. Alien's answer is perfect, but anyway I don't recommend to use

because it just a hack which makes your markup dirty. This is useless empty div in terms of bad structure and semantic, this also makes your code not flexible. In some browsers this div causes additional height and you have to add height: 0; which even worse. But real troubles begin when you want to add background or border around your floated elements - it just will collapse because web was designed badly. I do recommend to wrap floated elements into container which has clearfix CSS rule. This is hack as well, but beautiful, more flexible to use and readable for human and SEO robots.