The right use of float, 90% of people are using the wrong

For web front-end developers, you must not be unfamiliar with float. You can not live without it, but often endure the pain it brings to you, perhaps you think it is a little bit of knowledge, but you really able to harness it? So familiar with it, but often become you do not know, it seems so strange, so that you feel it is insane to the point.

Today, the young uncle takes you to re-recognize this familiar unfamiliar friend.

The original design of float was designed to achieve text-to-image blending and to surround the picture. Today's usage is basically to achieve horizontal typesetting, although it is a kind of "misuse", but often can achieve the effect we want. Most people know to float, but not everyone knows the principle and design of float.

Let's look at some of the properties of float:

First, destructive

The destructive nature of float is that the element that sets float is out of the flow of the document, causing the parent element to "collapse", which is, well, destructive. Why does the parent element collapse phenomenon? The reason is simple, because float is designed to achieve text wrapping, and if the parent element does not collapse, how do you achieve the surround effect? Next I use the picture and the code way to explain this destructive concrete appearance to everybody, appears intuitively to understand some.

This is a non-float effect.

This is the effect of adding float.

Did you see that? Is the difference obvious? The P tag is completely out of P and out of the document stream.

Second, the inclusion of

Block-level elements if you do not set float, it will fill the entire screen by default, and if float is set, it will only wrap its contents, directly on the example bar.

This is the p without float

This is the p with the float added

So it's intuitive.

Third, clear the space

Float also has a very useful feature, which is to clear the space. I'm not going to put a picture on this, so I'll just describe it. For example, in a p inside put my picture, the picture and the picture by default will have a few pixels of space, also can call the gap. But often this gap or space is not what we need, this time just give the picture a float, let it out of the flow of the document, the picture and picture will be perfectly together.

Okay, here's what I'm going to talk about today.

Finally share a self-created motto: Do not underestimate any one you think is very simple knowledge point, tall on the site is composed of these simple points of knowledge combined.