[Face up to CSS 08] Why do you need to collapse my elements to the float of Wu !!!

Preface

I had to answer a question about position a month ago. At that time, I had the honor to give it to me, and it was the day I went to other places.

So I started to get involved that morning. After I wrote my blog, I was in a hurry to get on the plane:

All of you are tired after the end of the weekend. Let's take a look at the interview questions in the cold winter)

At that time, I answered the question in a rough way, but I did not expect that I will discuss it again today! Yes, I still don't know why float will cause element collapse !!!!

Recent Status

My famous CSS teacher is: Zhang xinxu (self-admission entry)

Recent guide: winter

In addition to the previous accumulation of CSS, I have basically come from these two people. You can pay attention to them.

Most of my knowledge comes from Zhang xinxu. In the cold winter, I 've got a whole piece of knowledge. Although I have never met each other, I would like to thank you for that.

Issue

I have been thinking about the principle of float implementation recently.
I first came up with an idea based on various types of learning. float breaks the inline boxes
This leads to the collapse of block-level elements, because the height of the block-level elements is supported by line-height, and line-height also comes from line boxes.
However, after learning about BFC recently, we know that float triggers bfc, which leads to its independence. Therefore, the elements are encapsulated. This is also the principle of clear floating in overflow.
So what did float do ???

Although I was ill yesterday, this problem is lingering in my mind. So after I complete JavaScript today, I think it is necessary to go further.

Even if I don't study it, I find another expert. It seems that I don't know it... I don't care who he is here. Let's start learning today.

Clear: none => closed floating

I will also be confused about this issue, because it is strange to say clearly floating when I use my own CSS world view to explain the problem!

Therefore, it is reasonable to name him closed and floating. He also explained why overflow can cause the collapse to disappear.

Haslayout and block formatting contexts

Layout and BFC, which are unique under IE7, are coming again. I don't know how many times I mentioned him recently.

Through our previous study (the specific example of clearing the floating will not work here), there are only two solutions to solve the high collapse problem:

① Add the clear: both attribute at the end of the floating element to force it to close the element.

② Set the overflow or display: table attribute to trigger BFC (here, the cold winter teacher has different understandings and he thinks it is inappropriate to trigger nouns) to solve the collapse problem.

About BFC (now he has a vest called flow root), You should be familiar with it.

In my understanding, all normal flow elements are in the same BFC, And the float element is in a BFC. Each absolute position is a separate BFC.

PS :.

Our BFC can solve the overlay of top and outer margins, and can forcibly contain float elements:

The truth about the closed floating of overflow is:

The parent element has a new BFC, and the block-level element with BFC can contain floating!

The above seems to have been officially defined, and it's boring to dig below.

IE6/7 does not have the concept of BFC, and its own implementation of haslayout is basically equivalent to BFC.

Therefore, when we close the float in IE6/7, we need to add a sentence. The attribute of zoom: 1 triggers haslayout.

So far is the truth?

The above is the truth obtained after the search. Although I am still not satisfied with it, I am still confused. But for the moment, I will return to this question again in the future.

At that time, I hope I can find the answer I want.

Surprise

Although I didn't get the answer I wanted, I accidentally got something else. His name is inline-block.

Yes. You are not mistaken. What I want to say is inline-block!

In fact, we still like the cloud. For example, I always thought that IE7 didn't have the inline-block Attribute before, which is a big mistake!

Ye xiaochai ye xiaochai

The above is a standard browser. Let's take a look at our IE7:

As you can see, although there is a problem with the middle block, there is no problem with our inline-block !!!

The bottom of the guy in the middle is gone, and everyone knows why (layout ).

The above is an in-Row Element. Let's take a look at the performance of block-level elements.

Ye xiaochai ye xiaochai

Let's take a look at IE7's performance:

This guy just ignored me !!! Therefore, it is not the inline-block that does not exist, but the support for block-level elements is problematic. Therefore, we need to do this for block-level elements:

Ye xiaochai ye xiaochai

Even though there is no gap between them, they have achieved our goal. The problem comes again:

Why is there an inexplicable interval between inline-block?

Note that if you look at the picture, you should see that the inline-block element has an interval in the modern browser, and I have been searching for a long time!

This is because there is an interval between inline elements by default (IE7 does not have an interval )!

Ye xiaochai ye xiaochai

 

IE7

 

Here I am no longer entangled. I will attach the copied code to solve the Gap:

 { :; :; } { :; :; :; :; } {   :;     }  { :; :; :; }

Conclusion

Cough, actually I'm ill... I got hurt. I just asked my sister to step on me, and a brother stepped on me. Now, please join me ....