float:

Floating allows an element to move to the left or right of its parent element

Use the float attribute to set the activity of the element

Optional values:

none default value:

element is not floated

left：

element floats left

right

element floats right

Notice:

After the element is set to float, the equation of the horizontal layout does not need to be forced to satisfy the horizontal equation

After the element is set to float, it will be completely separated from the document flow and no longer occupy the position of the document flow

So elements below the element that are still in the document flow will automatically move up

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 20px red solid ;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body> 
</html>

After the element is set to float, it will be completely separated from the document flow and no longer occupy the position of the document flow

So elements below the element that are still in the document flow will automatically move up

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 20px red solid ;
            float: left;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: black;

        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"> </div>
</body> 
</html>

out of document flow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 20px red solid ;
            float: left;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: black;
            float: left;
            /*本来的box1还没有脱离文档流之前，它实际所占用的位置应该是整个水平宽度
            ，它下面的box2应该排在它的下面，但是当box1脱离文档流之后，它所占的实际
            位置将不再是整个水平的宽度，又由于它设置浮动以后，会完全脱离文档流，不再
            占用文档流中的位置，设置浮动以后元素会向父元素的左侧或右侧移动，如果想要
            让他们在一排的话，只要将另一个也脱离文档流即可
            */

        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"> </div>
</body> 
</html>

Floating features:

1: Floating elements will completely break away from the document flow and no longer occupy a position in the document flow

2: After setting the float, the element will move to the left or right of the parent element

3: Floating elements will not be removed from the parent element by default

4: When the floating element moves to the left or right, it will not exceed other floating elements in front of it

5: If the top of the floating element is a non-floating block element, the floating element cannot be moved up

6: The floating element will not exceed the floating sibling element above it, at most it is as high as it

Brief summary:

At present, the main function of floating is to make the elements in the page can be arranged horizontally

You can make some horizontal layouts by floating (for example, if you want to arrange three divs horizontally, you only need to set all three of them to float)

what is float

float:

Optional values:

Notice:

Floating features:

Brief summary:

Guess you like