CSS layout Float "3"

The Float property defines the direction in which the element floats.

A floating element generates a block-level box, regardless of its own element.

If floating non-replacement elements, specify a definite width; otherwise, they will be as narrow as possible.

Note: If there is only a small amount of space above a row for floating elements, then this element jumps to the next line, which continues until a row has enough space.

See, when you float box 1 to the right, it moves out of the document stream and shifts to the right until its right edge touches the right edge of the containing box:

Again, when Box 1 floats to the left, it is out of the document stream and moves to the left until its left edge touches the left edge of the containing box. Because it is no longer in the document flow, it does not occupy space, actually covers box 2, so that box 2 disappears from view.

If you move all three boxes to the left, the box 1 floats to the left until it touches the containing box, and the other two boxes float to the left until you hit the previous float box.

As shown, if the inclusion box is too narrow to accommodate three floating elements arranged horizontally, the other floating blocks move down until there is enough space. If the height of the floating elements is different, then they may be "stuck" by other floating elements when they move down:

The Clear property specifies which side of the element does not allow other floating elements.

CSS layout Float "3"