HTML float right element order

Question

If I have three elements flaoted to right, why order is following (see jsfiddle) element 1 is first element on right side, when element 3 is actually last element.

O

Answer 1

float property starts it's analysis from the most right to most left.
ex:

with this rule:

.block {
    float: left;
}

block-3 gets aligned to the left, we have: block-3, block-1, block-2
block-2 gets aligned to the left, we have: block-2, block-3, block-1
block-1 gets aligned to the left, we have: block-1, block-2, block-3

with this rule:

.block {
    float: right;
}

block-3 gets aligned to the right, we have: block-1, block-2, block-3
block-2 gets aligned to the right, we have: block-1, block-3, block-2
block-1 gets aligned to the right, we have: block-3, block-2, block-1

If you want them float:right in the right order: block-1, block-2, block-3
then you should swap them in markup

UPDATE: Or wrap them all in a parent, and only float parent