How does floating and clearing on the same element work?

Question

I was brushing up on my CSS skills earlier and I came across a tutorial that has me going bald. Here's the link: http://css.maxdesign.com.au/floatutorial/tutorial0304.htm I have spent hours researching for an answer to this but haven't came across anything that helped me.

The author of the tutorial does not 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 and maybe I can keep some of my hair.

Edit: Here is CSS code and a screenshot from the tutorial linked above...

.floatright {
    float: right;
    margin: 0 0 10px 10px;
    clear: right;
}

p { margin-top: 0; }

Answer 1

You misunderstand clearing. clear: right simply means that the element should vertically clear all previously right-floated elements in the same context, in other words that it should drop below all other right-floated elements. Visualization:

|                          |
|            +-----++-----+|
|            |  A  ||  B  ||
|            |     ||     ||
|            +-----++-----+|
|                   +-----+|
|                   |  C  ||
|                   |     ||
|                   +-----+|
|                          |

All elements are floated right, but C is set to clear: right, so it drops below the previous floated elements.