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

CSS float and clear

Sample Fiddle

Just try to remove clear:both property from the div with class sample and see how it follows floating divs.