CSS Float (float)

CSS Float (float) one, CSSfloat (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.

Second, how the elements float

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.

If the image is floating right, the following text flow will wrap around its left side:

img {    float:right;}

Third, floating elements adjacent to each other

If you put a few floating elements together, if there is space, they will be adjacent to each other.

Here, we use the Float property on the picture gallery:

{    float:left;     width:110px;     height:90px;     margin:5px;}

Iv. Clear float-use clear

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.

Use the Clear property to add a picture gallery to the text:

. Text_line {    clear:both;}

CSS Float (float)