How does floating and clearing on the same element work?
===

I was brushing up on my CSS skills earlier and I came across a tutorial that has almost caused me to become bald. Here it is: http://css.maxdesign.com.au/floatutorial/tutorial0304.htm I've spent hours researching for an answer but haven't came across anything. 

The author of the tutorial doesn't give any good details to what is going on with elements. I understand that floating lifts an element off the page and floats it in the given direction (left / right). Clearing resets the floated element and places it back into the flow of the page.

How are those elements still floated to the right if the right side has been cleared? I don't understand the logic behind this. Any clarification on this would be deeply appreciated.