clear:both makes the element drop below any floated elements that precede it in the document.
You can also use clear:left or clear:right to make it drop below only those elements that have been floated left or right.
+------------+ +--------------------+
| | | |
| float:left | | without clear |
| | | |
| | +--------------------+
| | +--------------------+
| | | |
| | | with clear:right |
| | | (no effect here, |
| | | as there is no |
| | | float:right |
| | | element) |
| | | |
| | +--------------------+
| |
+------------+
+---------------------+
| |
| with clear:left |
| or clear:both |
| |
+---------------------+
When you use float without width, there remains some space in that row. To block this space you can use clear:both; in next element.
Just to add to RichieHindle's answer, check out Floatutorial, which walks you through how CSS floating and clearing works.
Source: Stackoverflow.com