A brief analysis of the usage of HTML float

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

Recommend

React handwriting tab switching problem

Parent File import React, { useState } from '...

Detailed explanation of the deployment process of SEATA transaction service Docker

1. Create a database authorization statement >...

How to regularly clean up docker private server images

Using CI to build docker images for release has g...

The use of v-model in vue3 components and in-depth explanation

Table of contents Use two-way binding data in v-m...

The most complete tutorial on installing centos8.1 with VMware15.5 and the problem of insufficient physical memory

1. Virtual Machine Preparation 1. Create a new vi...

Detailed explanation of MySQL information_schema database

1. Overview The information_schema database is th...

Pure CSS implementation (no script) Html command-style tooltip text prompt effect

Analyze the execution process. Move the mouse int...

MySQL ID starts to increase from 1 to quickly solve the problem of discontinuous ID

mysql id starts from 1 and increases automaticall...

Implementation steps of encapsulating components based on React

Table of contents Preface How does antd encapsula...

WeChat Mini Programs Achieve Seamless Scrolling

This article example shares the specific code for...

How to maintain MySQL indexes and data tables

Table of contents Find and fix table conflicts Up...

Linux configuration SSH password-free login "ssh-keygen" basic usage

Table of contents 1 What is SSH 2 Configure SSH p...

Detailed explanation of simple html and css usage

I will use three days to complete the static page...

Detailed steps for using AES.js in Vue

Use of AES encryption Data transmission encryptio...

Overview of time configuration under Linux system

1. Time types are divided into: 1. Network time (...