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

How to connect to MySQL database using Node-Red

A brief analysis of the usage of HTML float

How to connect to MySQL database using Node-Red

MySQL optimization tips: analysis of duplicate removal implementation methods [millions of data]

The reason why MySQL manually registers the binlog file and causes master-slave abnormalities

A simple example of using Vue3 routing VueRouter4

Detailed basic operations on data tables in MySQL database

How to run the springboot project in docker

The whole process of installing gogs with pagoda panel and docker

vue+el-upload realizes dynamic upload of multiple files

Input file custom button beautification (demo)

Use render function to encapsulate highly scalable components

Recommend

Introduction and usage summary of React-Native screenshot component react-native-view-shot

Summary of Problems in Installation and Usage of MySQL 5.7.19 Winx64 ZIP Archive

Detailed explanation of Nginx http resource request limit (three methods)

SQL implementation of LeetCode (178. Score ranking)

How to upload and download files between Linux server and Windows system

Sharing tips on using vue element and nuxt

JavaScript to achieve fancy carousel effect

Nginx stream configuration proxy (Nginx TCP/UDP load balancing)

Detailed analysis of the problem of adding where conditions using left join in MySQL

How to install git on linux

Analysis of the principle of Vue nextTick

Analyze the method of prometheus+grafana monitoring nginx

Summary of Docker Data Storage

How to reasonably use the redundant fields of the database

Practical method of upgrading PHP to 5.6 in Linux