CSS know how much (8)--float on the previous article

Original: CSS know how much (8)--float on the previous article

1. Introduction

For all of our web front-end developers, float is or was once the most familiar stranger-you cannot live without it, but you are suffering all the pain that it brings to you, and you think it is simply a bit of knowledge, but it does not control its strange phenomena.

This is the--float we love and hate. Therefore, the systematic study of float is very very important. In addition to reading books and read blog articles, I recommend you to see a wonderful (sound is very magnetic, you know) the recording of the tutorial "CSS in-depth understanding of float floating", speak very well and thoroughly.

2. Re-recognize float2.1. Misunderstanding and "misuse"

Since the mention of "misuse", you crossing think about it, how do you use float on weekdays? In addition, since the "misuse" of the quotation marks, it is not true that the use of misuse, but after the use of the wrong, brought real results.

I would like to ask everyone, I think the vast majority of float is for-horizontal layout, or multi-column layouts. The use of this is correct, most people use this, bootstrap grid system is also using float to achieve, and before CSS3 is popularized, the best solution for multi-column layout is to use the float--otherwise you use table.

However, such use is indeed a misunderstanding and "misuse" of float, because float was designed to be used for- text wrapping effect . That is, a picture a paragraph of text, after the picture float:left, the text will surround the picture.

　　

However, at that time, multi-column layout and horizontal layout mainly rely on table implementation, and later people see the discovery, using table will lead to large code, confusion, not conducive to SEO, and then found that Float+div is a very good typesetting solution, so--the past few years "Css+div" Page layout has always been a hot topic, but also a variety of tall on the surface of the test must be an item.

Beginners float students, if you do not start from the most basic knowledge, but from the network after the scattered or the scattered code of colleagues and classmates, you may only know that float is used for typesetting, but you do not know the many characteristics of float, which led to the use of float when you have many problems. Please see below for no letter.

2.2. Destructive

First of all, let's see two demos, such as. The first demo is a simple example, the display is also very normal. The second demo, the only difference is that added Float:left, the upper <div> but there is a " collapse " phenomenon.

　　

However, this is the "destructive"--float of float that destroys the original structure of the parent tag, causing the parent tag to collapse. The most fundamental reason for this is that the element that is set up with float is out of the flow of the document .

The first contact "out of the flow of the document" Friends can understand: Div is the father, IMG is its son, originally good father-son relationship, the original can be decent to show a relationship with the effect of a. Until one day, IMG was set to float. God (Browser) stipulates that any float element will not be allowed to stay in their own family, so IMG was expelled from the home, cut off and div father and son relationship. As a result, the DIV does not have the IMG son, also can not show the father and son of the inclusion of the relationship, so the two are different, each other irrelevant. --is that easy to understand?

But never forget that float was designed to achieve a text wrapping effect. When there is text in the Div, the text wraps around the IMG. Such as:

　　

Well, now that you know that float is destructive, there may be a lot of friends who knew about it before, but have you ever wondered whyfloat was designed to be destructive and why it was out of the flow of documents? This is very important ! In fact, the reason is very simple-to achieve the text wrapping effect?

One might ask: Ah? Did you just say that float was originally designed to achieve text wrapping? What's the matter with destruction?

Then I will ask you: if float does not let the parent element collapse, can you achieve text wrapping effect? I'll give you two pictures and you'll see. If you don't understand, you can leave a message for me to discuss.

　　

2.3. Parcel Sex

"Wrapping" is also a very important feature of float, and you must be familiar with this feature when using float. Let's start by looking at a small example:

　　

For example, if the normal div does not have a width set, it will fill the entire screen, as described in the previous Box mode section. And if the div is added float:left, it suddenly becomes compact, the width changes, the content Wang Fu Three words wrapped-this is the inclusion of. when the div is set to float, its width is automatically adjusted to wrap the content width instead of filling the parent container .

Note that while the Div embodies the inclusion, its display style is unchanged or block.

　　

Here we look back, in the previous blog, also mentioned the "package", which style? You can think about it here and I'll give an answer in the blog comments.

　　

Knowing the nature of the package, we continue to think:Why does float have to be wrapped ? In fact, the answer has to be found in the design of the float, float is designed to achieve text wrapping effect. Text wraps around a picture better to understand, but what if you want to wrap text around a div? At this point the div is not "wrapped" up, then how to achieve the surround effect?

The truth is simple, you may be the kind of smart, but the key is to think .

2.4. Clear the Grid

Float also has a feature that you might not be familiar with--emptying the lattice. According to management, let me give an example.

　　

In In the first example, there will be a space in the middle of the normal IMG, because multiple tags will have a newline, and the browser recognizes the change behavior space, which is also very normal. In the second example, IMG Adds the float:left style, which leaves the IMG with no space between them, with four IMG next to each other.

If you have not noticed before, now think about the program that has been written before, there is not this feature. Why is float suitable for Web page layout (commonly known as "masonry bricks")? It is because of the float layout of the page perfectly, the middle of a fly can not fly in.

The root cause of the "empty lattice" feature is that float causes the node to detach from the document flow structure . It does not belong to the document flow structure, then its side of what line, space and it does not matter, it is as far as possible to move closer, can rely on how close to rely on how close, this is the essence of the empty lattice.

　　

(Float content is more, we divide up, next two articles to introduce, this is the last article.) The next article will be issued immediately, please look forward to)

-------------------------------------------------------------------------------------------------------------

Welcome to my Tutorial:"From design to Mode" " deep understanding of JavaScript prototype and closure series " "Microsoft petshop4.0 Source Interpretation Video" "Json2.js Source Interpretation video"

Also welcome to my open source project-Wangeditor, a simple and easy-to-use web Rich Text editor

-------------------------------------------------------------------------------------------------------------

CSS know how much (8)--float on the previous article