Tutorial: Understanding CSS Float attributes

A floating box can be moved to the left or right until its outer edge hits the border of the contained box or another floating box.

Because the floating box is not in the normal stream of the document, the block box in the normal stream of the document performs as if the floating box does not exist.

CSS float

When frame 1 is moved to the right, it is moved out of the Document Stream and to the right until its right edge hits the right edge of the contained box:

Next, when box 1 is floating to the left, it is detached from the document stream and moved to the left until its left edge hits the left edge of the contained box. Because it is no longer in the document stream, it does not occupy space. In fact, it overwrites Box 2 so that box 2 disappears from the view.

If all three boxes are moved to the left, box 1 floats to the left until the contained box is reached, and the other two boxes move to the left until the first floating box is reached.

As shown in, if the box is too narrow to accommodate three floating elements in a horizontal arrangement, the other floating blocks move down until there is enough space. If the height of floating elements is different, they may be "stuck" by other floating elements when moving down ":