Look at where the left edge of this block is-- underneath the
float. It's only the text that moves right.
This div is display: list-item. It doesn't change anything. But
the bullet is probably not in a very useful place. Technically
it should be way over on the left, outside the "principal block
box" (the box with a green border that this text is in), but
browsers cheat a bit in various ways.
-
This one is an actual <li> as opposed to merely a
<div> with display: list-item. That certainly shouldn't
change anything (it should look just like the example above),
but in some browsers it does.
This <div> has a left margin that happens to be the width
of the float. Easy when you know the width of the float for
sure. This should be the only block so far whose green border
starts to the right of the float.
On this <div> we're using overflow: hidden to make it a
block-formatting-context. That means the block itself moves
to the right of the float, automatically by however
wide the float is. The specification does not guarantee this
behaviour-- conforming UAs could instead move this block down
underneath the float.