How much do you know about css (8)--float Part 1_html/css

1. Introduction

For all of us web front-end developers, float is or was once the most familiar stranger to you?? You can't live without it, but you bear all the consequences it brings to you all day long. This kind of pain, you think it is very simple and only requires a little knowledge, but you cannot control its various strange phenomena.

This is what we love to hate??float. Therefore, it is very, very important to learn float systematically. In addition to reading books and blog articles, I recommend everyone to read the tutorial "In-depth Understanding of CSS Float" recorded by a weird (the voice is very magnetic, you know), which is very good and thorough.

2. Re-understand float

2.1. Misunderstanding and "misuse"

Since "misuse" is mentioned, readers should think about it, how do you use float on daily basis? In addition, since "misuse" is in quotation marks, it means that such use is not a real misuse, but an accidental use that brings about real effects.

Asking everyone this way, I think most of them use float for horizontal layout or multi-column layout. This usage is correct, and most people use it this way. Bootstrap’s grid system is also implemented using float, and before CSS3 was popularized, the best solution for multi-column layout was also to use float?? Otherwise you Just use table.

However, this use is indeed a misunderstanding and "misuse" of float, because float was originally designed to be used for text wrapping effects. That is, if there is a picture and a text, after the picture float:left, the text will wrap around the picture.

　　However, the multi-column layout and horizontal typesetting at that time mainly relied on tables. Later, people discovered that using tables would lead to large amounts of code, confusion, and was not conducive to SEO. Then I found that float div is a very good layout solution, so... "css div" page layout has been a hot topic in the past few years, and it is also a must-have for all kinds of high-level interview questions.

For those who are new to float, if you don’t start with the most basic knowledge, but start from the scattered code on the Internet or the scattered codes of colleagues and classmates, you may only know that float is used for typesetting, but You don't know many characteristics of float, which leads to many problems when you use float. If you don’t believe it, please read below.

2.2. Destructive

First, let’s take a look at the two demos, as shown below. The first demo is a simple example, and the display effect is normal. In the second demo, the only difference is that float:left is added to , but the upper

appears to "collapse".

　　However, this is the "destructiveness" of float? Float destroys the original structure of the parent tag, causing the parent tag to collapse. The most fundamental reason for this phenomenon is that elements set to float will break away from the document flow.

Friends who are exposed to "out of document flow" for the first time can understand it this way: div is the father, and img is its son. Originally, there was a good father-son relationship, but originally the father and son could show an effect that includes the relationship decently. Until one day, img was set to float. God (browser) stipulates that no float element is allowed to stay in its own family, so img was expelled from the family and severed the father-son relationship with div. As a result, the div no longer has the img son, so it can no longer display this father-son inclusion relationship, so the two are independent of each other and have nothing to do with each other. ??This way, it is easy to understand, right?

However, never forget the original intention of float being designed - to achieve text wrapping effect. When there is text in the div, the text will still wrap around the img. As shown below:

Well, everyone now knows that float is destructive. Many friends may have known this feature before, but have you thought about it? Let’s take a look: Why is float designed to be destructive, and why does it break away from the document flow? This is very important! In fact, the reason is very simple? To achieve the wrapping effect of text?

Someone may ask: Huh? Didn't you just say that the original intention of float is to achieve a text wrapping effect? What does it have to do with destructiveness?

At this time I will ask you: If float does not collapse the parent element, can the text wrapping effect be achieved? I’ll give you two pictures and you’ll know. If you don’t understand, you can leave me a message to discuss.

2.3. "Wrapping"

"Wrapping" is also a very important feature of float. Everyone must be familiar with this feature when using float. Let’s start with a small example:

As shown above, if the width of an ordinary div is not set, it will fill the entire screen. We also talked about it in the previous section on box mode. Been there. And if you add float:left to the div, it suddenly becomes compact, the width changes, and the content "Wang Fupeng" is wrapped?? This is wrapping. After a div is set to float, its width will automatically adjust to wrap the content width instead of filling the entire parent container.

Note that although the div reflects wrapping at this time, its display style has not changed and is still block.

Let’s review here. In the previous blog, we also mentioned "wrapping". What are the styles? You can think about it here and I will give the answer in the comments of the blog.

After knowing the wrapping property, we still continue to think: Why does float have wrapping property? In fact, the answer has to be found from the original design intention of float. Float is designed to achieve a text wrapping effect. Text wrapping around images is easy to understand, but what if you want text to wrap around a div? At this time, the div is not "wrapped", so how to achieve the surrounding effect?

The reason is very simple. You may be the kind of smart person who knows everything at once, but the key lies in thinking.

2.4. Clear spaces

Float also has a feature that you may not be very familiar with - clear spaces. According to management, let’s give an example first.

In the picture above. In the first example, there will be spaces in the middle of normal img, because multiple tags will have line breaks, and the browser recognizes the line breaks as spaces, which is normal. In the second example, the img adds the float:left style, which results in no spaces between the img and four img closely next to each other.

If you haven’t noticed it before, now think about whether the programs you have written before have this feature. Why is float suitable for web page layout (commonly known as "laying bricks")? It’s because the web pages laid out by float fit perfectly, not even a fly can fly in the middle.

The fundamental reason for the "clear spaces" feature is that float will cause nodes to break out of the document flow structure. It no longer belongs to the document flow structure, so any line breaks and spaces around it have nothing to do with it. It will try to move as close as possible to one side, as close as possible. This is the essence of clearing spaces.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　》 -------------------------------------------------- -------------------------------------------------- --------

Welcome to follow my tutorials:

"From Design to Pattern""In-depth understanding of JavaScript prototype and closure series" "Microsoft petshop4.0 source code interpretation video" "json2.js source code interpretation video"

You are also welcome to follow my open source project??

wangEditor, a simple and easy-to-use web rich text editor

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