search
HomeWeb Front-endHTML TutorialDetailed explanation of the usage of float that you don't know

For web front-end developers, you must be familiar with float. You can't live without it, but you often endure the pain it brings you. Maybe you think it has a little bit of knowledge, but can you really control it? It is so familiar, but it often becomes unrecognizable to you and seems so strange that you think it is heart-breaking and outrageous.

Today, the young uncle will take you to get to know this familiar and strange friend again.

The original design intention of float is to achieve a mixed arrangement of pictures and text, so that the text can surround the picture. Today's usage is basically to achieve horizontal layout. Although it is a "misuse", it can often achieve the effect we want. Most people know how to use float, but not everyone knows the principle and original design intention of float.

Let’s take a look at some characteristics of float:

1. Destructiveness

The destructiveness of float means: elements set to float will break away from the document flow and will It causes the "collapse" of its parent element. Yes, this is its destructiveness. Why does the collapse of the parent element occur? The reason is simple, because the original intention of float is to achieve text wrapping effect. If the parent element does not collapse, how to achieve the wrapping effect? Next, I will use pictures and codes to explain to you the specific appearance of this destructiveness, which makes it more intuitive and easier to understand.

This is the effect without float

Detailed explanation of the usage of float that you don't know


##This is the effect with float

Detailed explanation of the usage of float that you don't know

Did you see it? Is the difference obvious? The p tag is completely separated from p and from the document flow.

2. Wrapping

If a block-level element is not set to float, it will fill the entire screen by default. If float is set, it will only wrap its content. Let’s go straight to the example. .

This is p without float

Detailed explanation of the usage of float that you don't know

This is p with float added

Detailed explanation of the usage of float that you don't know

This is very intuitive.

3. Clear spaces

float also has a very useful feature, which is to clear spaces. I won’t post a picture of this, just a description. For example, if I put a picture in a p, there will be a few pixels of space between the pictures by default, which can also be called a gap. But often this gap or space is not what we need. At this time, we only need to give the image a float to separate it from the document flow, and the images will fit together perfectly.

Okay, that’s what I’m going to talk about today.

Finally, let me share with you a self-created motto: Don’t underestimate any knowledge point that you think is very simple. All high-end websites are composed of these simple knowledge points.

If you like my article, feel free to do so!

【Related recommendations】

1.

Free html online video tutorial

2.

html development manual

3.

php.cn original html5 video tutorial

The above is the detailed content of Detailed explanation of the usage of float that you don't know. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
float最大值为多少float最大值为多少Oct 11, 2023 pm 05:54 PM

float最大值:1、在C语言中,float最大值是3.40282347e+38,根据IEEE 754标准,float类型的最大指数为127,尾数的位数为23,通过这种方式,最大浮点数为3.40282347e+38;2、在Java语言中,float最大值是3.4028235E+38;3、在Python语言中,float最大值是1.7976931348623157e+308。

数据库float长度有哪些数据库float长度有哪些Oct 10, 2023 pm 03:57 PM

常见的数据库float长度有:1、MySQL中的float类型长度,可以是4个字节或8个字节;2、Oracle中的float类型长度,可以是4个字节或8个字节;3、SQL Server中的float类型长度,固定为8个字节;4、PostgreSQL中的float类型长度,可以是4个字节或8个字节等等。

float精度能到多少float精度能到多少Oct 17, 2023 pm 03:13 PM

float精度能到6到9位小数。根据IEEE754标准,float类型可以表示的有效数字位数为大约6到9位。需要注意的是,这只是理论上的最大精度,实际使用中由于浮点数的舍入误差,float类型的精度往往会更低。在计算机中进行浮点数运算时,由于浮点数的精度限制,可能会出现精度损失的情况。为了提高浮点数的精度,可以使用更高精度的数据类型,如double或者long double。

c语言中float什么意思c语言中float什么意思Oct 12, 2023 pm 02:30 PM

C语言中的float是一种数据类型,用于表示单精度浮点数,浮点数是一种用科学计数法表示的实数,可以表示非常大或非常小的数值。float类型的变量可以存储小数点后6位有效数字的数值,在C语言中,使用float类型可以进行浮点数的运算和存储,其变量可以用于表示小数、分数、科学计数法等需要精确表示的实数,与整数类型不同,浮点数可以表示小数点后的数字,并且可以进行小数的四则运算。

如何将string转换成float如何将string转换成floatOct 16, 2023 pm 02:03 PM

可以通过Python、JavaScript、Java、C#、Ruby和PHPstring转换成float。详细介绍:1、Python,输入float_number = float(string_number);2、JavaScript,输入float_number = parseFloat(string_number);;3、Java等等。

float属性取值有哪些float属性取值有哪些Oct 10, 2023 pm 02:03 PM

float属性取值有left、right、none、inherit、clearinline-start和inline-end。详细介绍:1、left,元素向左浮动,即元素会尽可能地靠近容器的左边,其他元素会围绕在其右侧;2、right,元素向右浮动,即元素会尽可能地靠近容器的右边,其他元素会围绕在其左侧;3、none默认值,元素不浮动,会按照正常的文档流排列等等。

float和double有什么区别float和double有什么区别Oct 11, 2023 pm 05:38 PM

float和double区别主要在于精度、存储和计算速度、范围以及在编程语言中的使用。详细介绍:1、精度不同,Float是单精度浮点数,占用4个字节(32位),而double是双精度浮点数,占用8个字节(64位);2、存储和计算速度不同,double占用的空间更大,需要更多的存储空间来存储数值,在需要高性能和速度的应用程序中,使用float类型可能会更加高效;3、范围不同等等。

float32字节包括哪些float32字节包括哪些Oct 10, 2023 pm 04:07 PM

float32字节包括符号位、指数位和尾数位,用于表示32位浮点数。详细介绍:1、符号位(1位),用来表示数字的正负,0表示正数,1表示负数;2、指数位(8位),用来表示浮点数的指数部分,通过指数位,可以调整浮点数的大小范围;3、尾数位(23位),用来表示浮点数的尾数部分,尾数位存储了浮点数的小数部分。符号位决定了浮点数的正负,指数位和尾数位共同决定了浮点数的大小和精度。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft