What is the use of style="clear:both"?

I happened to see a div which had the style clear:both! What is the use of clear in style?

<div style="clear:both">

From stackoverflow

• 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    |
  |                     |
  +---------------------+
  

  Nuno Furtado : +1 for the schematic answer. nice explanation

  Jason : BEWARE THE FLOAT BUG! http://www.positioniseverything.net/explorer/floatIndent.html

• Just to add to RichieHindle's answer, check out Floatutorial, which walks you through how CSS floating and clearing works.