How to make CSS float

A floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box.

Because the floated box is not in the document's normal flow, a block box in the document's normal flow behaves as if the floated box does not exist.

CSS floating, in CSS, we realize the floating of elements through the float attribute.                                                                                                                                                                                                                               (Recommended learning: CSS tutorial)

Please look at the picture below. When box 1 is floated to the right, it breaks away from the document flow and moves to the right until its right edge Hitting the right edge of the containing box:

Look at the picture below again. When box 1 floats to the left, it breaks away from the document flow and moves to the left until its left The edge touches the left edge of the containing box. Because it is no longer in the document flow, it takes up no space and actually covers box 2, causing box 2 to disappear from view.

If all three boxes are moved to the left, then box 1 floats to the left until it hits the containing box, and the other two boxes float to the left until it hits the previous floating box.

As shown in the figure below, if the containing box is too narrow to accommodate the three floating elements arranged horizontally, then the other floating blocks move downward until there is enough space. If floated elements are of different heights, they may get "stuck" by other floated elements as they move downward:

The above is the detailed content of How to make CSS float. For more information, please follow other related articles on the PHP Chinese website!