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

The content of divTwo is not moving independently. The content is text, so it's rendered in a line box.

Now while unfloated, uncleared blocks ignore the presence of floated elements that precede them, the line boxes that they contain don't. The line boxes will avoid the floated element and go either alongside the floated element or, if there's no space for them there, underneath the floated element.

In your example, there is no space alongside, so the text has gone underneath the floated element. But since you've set a fixed height for divTwo, there's not enough space underneath and yet inside divTwo for the line box either. So the text content overflows divTwo, hence the text appears without divTwo's background behind it.