What is the difference between float: left and float: right?

With float: left items pack toward the left edge in source order; with float: right they pack toward the right, which visually reverses their order.

Floated items line up against the side you float them to, dropping to a new line when they run out of room. The direction changes which edge they start from:

/* float: left → items appear 1, 2, 3, 4 from the left */
div { float: left; width: 30%; }

/* float: right → items appear 3, 2, 1 from the left (reversed) */
div { float: right; width: 30%; }

The surprise is with float: right: the first element in your HTML lands on the far right, and each later element stacks to its left. So four right-floated boxes written 1-2-3-4 in HTML display as 3-2-1 on the first row, with 4 wrapping below — the source order is preserved but the visual order looks mirrored.