What is the role of float attribute in css attributes

The role of the float attribute in css is to control the movement of elements. Even if the element moves to the left or right, the elements around it will also be rearranged; the horizontal direction of the element floats, which means that the element can only move left and right. It cannot move up or 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.

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

What is the role of the float attribute in the css attribute ?

float, an attribute of CSS, the main attribute values ​​are: left (left floating), none (not floating), right (right floating), inherit (inherit parent element float), mostly used Web page layout.

CSS 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.

How elements float

The elements float horizontally, which means that the elements 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 to the left of it:

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.

Here, we use the float attribute for the image gallery:

Example

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

Clear float - Use clear

Element float Afterwards, 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.

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

Example

.text_line
{
    clear:both;
}

Recommended learning: "css video tutorial"

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