A brief analysis of the usage of HTML float

Some usage of float

Left suspension: float:left;
Right suspension: float:right;

Float usage

Float has a wide range of uses. Here is a brief introduction to its most common uses:

Before I came across float, I would set some inline-block and block attributes with div inlay to complete the layout of the page. Then I came across the float attribute, which made it much easier to float the elements directly. There is no distinction between block-level elements, inline elements, or inline-block elements in the float. Float will also automatically layout as the parent element width changes, e.g. directly adjusting the visible window will squeeze the element to the next line.
In addition, as far as the SEO optimization we just learned is concerned, since the browser parses from top to bottom, most of the time the important content is written in the front, and some unimportant or advertisements are written in the back. However, we also want users to notice the advertisements, so most of the time the main content is arranged in the center, and the advertisements are suspended on the left and right. I believe that friends who often browse the web have also noticed this. Next, let’s talk about some of the writing and effects of suspension.

~~If a child element is suspended, the height of the parent element will collapse. This involves clearing the suspension, which will be explained in the next chapter.~~
So let's get back to the point,

The first phenomenon is float=inline-block

When suspended, the four blocks will be displayed in inline block mode: as shown below

<style>
        div{
            width:200px;
            height:200px;
            background-color: pink;
            border:1px solid black;
            float:left;
        }
    </style>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

The second phenomenon:

As shown in the figure below, since the first block element is floating, the second block element will be displayed below the first one.
But when the next element is suspended, it will not go over the previous element. For example, the fourth block element is suspended, but the third one is not. The fourth block element remains in its original position.

 <style>
        .first-one{
            float:left;
            background-color:green;
        }
        .second-one{
            background-color:purple;
        } 
        .third-one{
           
            background-color:blue;
        } 
        .fourth-one{
            float:left;
            background-color:grey;
        } 
        div{
            width:200px;
            height:200px;
            background-color: pink;
            border:1px solid black;
            font-size:30px;
        }
    </style>

<body>
    <div class="first-one"></div>
    <div class="second-one"></div>
    <div class="third-one"></div>
    <div class="fourth-one"></div>
</body>

The third phenomenon:

If all elements are floated, and the remaining width of the parent element is not enough to support the child elements in the row, then they will be aligned to the upper level.

This article is transferred from: https://segmentfault.com/a/1190000022669455

Summarize

This is the end of this article about the usage of HTML float. For more relevant HTML float content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Detailed explanation of JavaScript's Set data structure

>>: MySQL index principle and query optimization detailed explanation