The correct usage of float, 90% of people use it wrong

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

##This is the effect with float

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

##This is Added float p

## This should be 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.

The above is the detailed content of The correct usage of float, 90% of people use it wrong. For more information, please follow other related articles on the PHP Chinese website!