“This is the fifth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

floating

  1. What is floating?

Is to take the element out of the normal document flow. 2. Why float? When normal document layout cannot be resolved, you need to detfrom normal document flow. 3. Floating problems? Height collapse.

(1) Floating in three cases:

Without floating:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>floating</title>
   
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        #div1{
            background-color: red;
        }
        #div2{
            background-color: #a3ff50;
        }
        #div3{
            background-color: blue;
        }
    </style>
</head>

<body>

<div id="div1">A</div>
<div id="div2">B</div>
<div id="div3">C</div>

<center><font size=2>(I run a wechat official account: Lonely)</font></center>
<center><font size=2>(Welcome to the attention of those who like Python and programming!)</font></center>


</body>
</html>
Copy the code

1. When A floats right:

The original block elements are arranged from the top down, so the float takes them out of the normal flow of the document and they are no longer on the same level as the other block elements, which is why the float allows the block elements to be on the same line

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title> float </title> <style> div{width: 100px; height: 100px; border: 1px solid red; }#div1{/* Set div1 to float right */float: right;
            background-color: red;
        }
        #div2{
            background-color: #a3ff50;
        }
        #div3{
            background-color: blue;
        }
    </style>
</head>

<body>

<div id="div1">A</div>
<div id="div2">B</div>
<div id="div3">C</div>

</body>
</html>
Copy the code

Knowledge supply station:

Common navigation bars are implemented through floating and unordered lists!

2. When A floats left:

Simply set the float property value to left!

Note: WHEN A is floating, it is out of the normal document flow. It can be understood that A has now flown into the sky, and B is now overwritten by A.

3. When ABC all float left:

Set the float property for B and C as well! Note: now all three of the ABC’s have gone out of the normal document flow and into the sky!

So instead of going from top to bottom, which is not set, it goes from left to right

A floating box can move left or right until its outer edge touches the border that contains the box or another floating box.

Because the float box is not in the normal flow of the document, the box in the normal flow of the document behaves as if the float box does not exist.

🔆 In The End!

Start now, stick to it, a little progress a day, in the near future, you will thank you for your efforts!

This blogger will continue to update the basic column of crawler and crawler combat column, carefully read this article friends, you can like the collection and comment on your feelings after reading. And can follow this blogger, read more crawler in the days ahead!

If there are mistakes or inappropriate words can be pointed out in the comment area, thank you! If reprint this article please contact me for my consent, and mark the source and the name of the blogger, thank you!