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

Detailed installation tutorial of mysql-8.0.11-winx64.zip

A brief analysis of the usage of HTML float

Detailed installation tutorial of mysql-8.0.11-winx64.zip

The main idea of dynamically setting routing permissions in Vue

Introduction to basic concepts and technologies used in Web development

A brief discussion on MySQL select optimization solution

How to set the select to be read-only and not editable and the select value to be passable

Bootstrap 3.0 study notes page layout

Small details of web front-end development

js learning notes: class, super and extends keywords

Example of how to create a database name with special characters in MySQL

How to solve the error "ERROR 1045 (28000)" when logging in to MySQL

Recommend

Sample code for implementing water drop ripple animation button effect with CSS+JS

Using Docker+jenkins+python3 environment to build a super detailed tutorial

CSS Reset style reset implementation example

Detailed steps for Navicat to remotely connect to SQL Server and convert to MySQL

MySQL 8.0.15 version installation tutorial connect to Navicat.list

Example of using Docker to build an ELK log system

Use PHP's mail() function to send emails

MySQL 5.7 Common Data Types

Methods for optimizing Oracle database with large memory pages in Linux

Detailed explanation of mysql transaction management operations

Nginx defines domain name access method

HTML input file control limits the type of uploaded files

Introduction to HTML page source code layout_Powernode Java Academy

Vue3+el-table realizes row and column conversion

IDEA graphic tutorial on configuring Tomcat server and publishing web projects