Why does the background of a floated element appear to move independent of the content?

Question

In the CSS code below, it appears that the background of divTwo has moved behind divOne. But the content of divTwo appears to have been le

Answer 1

Alternative to @jpat827 answer would be to either set div two's clear property to left or add an empty div after div one and set it's clear property to left. What

The clear property, if there is no space left for the unfloated element, prevents the unfloated element from going under the floated element.

When you clear the div two to left, then what it really does is that it places div two below the floated element.

let's say, div one was floated to right, then you would have to clear div two to the right, in order to bring it below div one.

If, there were three divs, out of which two were floated to left and right, then the clear property for the third unfloated div must be set to both so that it can clear past elements floated in either direction.

I hope this was helpful.

Thank You