What is float in css

Floating in CSS refers to moving an element to the left or right, and the elements around it will also be rearranged. A floated element moves as far left or right as possible until its outer edge touches the border of the containing box or another floated box.

The environment of this article: windows10, css3, this article is applicable to all brands of computers.

Introduction to Float:

CSS Float (float) will move the element to the left or right, and the surrounding elements will also be rearranged.

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

(Learning video sharing: css video tutorial)

How do elements float?

The horizontal floating direction of the element means that the element can only move left and right but not up and down.

A floating element will try to move left or right until its outer edge touches the border of the containing box or another floating box.

Elements after the floated element will surround it.

Elements before the floated element will not be affected.

If the image is right-floated, the following text flow will wrap around it to the left:

Example:

img{
    float:right;
}

Floated elements next to each other

If you put several floated elements together, they will be next to each other if there is space.

Example:

Use float attribute for picture gallery:

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

Clear float - After using clear

After the element is floated, the surrounding elements will be rearranged. To avoid this, use the clear attribute.

The clear attribute specifies that floating elements cannot appear on both sides of the element.

Example:

Use the clear attribute to add a picture gallery to the text:

.text_line{
    clear:both;
}

Related recommendations: css tutorial

The above is the detailed content of What is float in css. For more information, please follow other related articles on the PHP Chinese website!