CSS Float (float)

The float (float) of the CSS moves the element left or right, and the elements around it are rearranged.

Float (float) is often used for images, but it is as useful in layout.

The horizontal direction of the element floats, meaning that the element can only move left and right without moving up or down. A floating element moves as far as possible to the left or right until its outer edge touches the bounding rectangle of the containing box or another floating box.

Elements that follow the floating element will surround it. Elements before the floating element will not be affected.

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.

Grammar

Float:left;float:right;float:none;float:inline-start;float:inline-end; /*  */float:inherit;float:initial;float:unset;

left: is a keyword that indicates that the element must be floating on its containing block.

Right: is a keyword that indicates that the element must float on its containing block to the left.

None: is a keyword, the default value, that indicates that the element cannot float.

inherit: Specifies that the value of the float property should be inherited from the parent element.

inline-start ：是一个关键字，表示元素必须在其包含块的起始侧浮动，即在ltr脚本的左侧和rtl脚本的右侧。

inline-end : is a keyword that indicates that an element must float at the end of its containing block, that is, to the right of the ltr script and to the left of the RTL script.

Clear floating

After the element floats, the surrounding elements are rearranged, in order to avoid this situation, use the clear property.

The Clear property specifies that no floating elements can appear on either side of the element.

Clear:both;

Reference:

• Mdn:float: Learn the basics of CSS float properties
• Beginner tutorial css float (floating)
• W3school CSS Float Property

CSS Float (float)