[CSS 08] to peak of Wu of float why you collapse the elements i!!!

Recommended for you: Get network issues from WhatsUp Gold. Not end users.


It would answer a month ago, when winter teacher in a position interview questions, fortunate to see at the time, and it is the day I go to the field.

So I began to work that morning, writing blog hurried on the plane:

After the weekend you are tired, then we together have a look [winter] interview questions. (said to Ali.)

At that time, just answer the question, but have never thought today would move out! Right, I still don't understand why float will lead to the collapse of the elements!!!!

The recent status

My CSS teacher: Zhang Xinxu (admission entry)

Recently the guide: Winter

I accumulated CSS things in addition to the previous, the basic source of this two people, you can look under the.

The majority of knowledge comes from Zhang Xinxu, winter let me put the whole knowledge together, although be strangers to each other, in this thanked.

Raises the question

I've been on principles of float implementation.

I started according to various learning produced an understanding, float destroyed the inline boxes inline frame

Leading to block level elements to collapse, because the block level elements is high up to line-height, while line-height is derived from line boxes.

But a recent study after BFC, know the float trigger BFC, leading to its independence, so the element is the parcel, which is the principle of overflow clear floating.

So what exactly is float doing what.? ? ?

Although I was sick yesterday, this problem remains in the brain, so today finished JS, think it is necessary to delve into the.

Don't study even, a study found that a master, seems to be in front, but I don't know... I'm here no matter who he is, begin today's learning.

clear: none=>Closed floating

On this issue, I will be confused, because I'm a CSS world view to explain the problem when it comes to know when floating feel strange!

The clear corresponding to the attribute: left, right, both, none
Press the truth to say clear: none is reset.

So here we named him closed floating reasonable. But he also explains why overflow can result in a lost.

HasLayout and block formatting contexts

IE7 specific layout and BFC again, I don't know how many times recently mentioned him.

Through before we study (example remove floating me here on the matter), want to no more than two kinds of solutions to highly subsidence problem:

① In the floating element at the end of the clear: both property, forced its closure elements

② Setting the overflow or display: table attribute trigger BFC (winter teacher here have a different understanding, he thinks the term trigger inappropriate), so as to solve the problem of collapse.

About BFC ( now he changed to a vest called flow root), you should be relatively familiar.

My understanding is that all normal elements of the flow are in the same BFC, float elements in a BFC, a single BFC each absolute positioning

PS: Here in error please come.

Our BFC can solve the margin superposition, can force contains a float element, the popular point said:

BFC is a separate box, sub element is not inside the layout of the outside elements, BFC still belongs to the ordinary flow

Overflow closed floating truth is:

The parent element has a new BFC, block level element has a BFC can contain floating!

The above is the official definition, then go digging under it's no fun.

IE6/No BFC this concept in 7, its hasLayout is equal to BFC.

So we in the IE6/7 closed floating time to add, the properties of zoom: 1 trigger hasLayout

The truth so far?

Above is the pursuit of obtained after the truth, although I was not satisfied, although I have stumbled but temporarily so, in the next period of time, I will come back to look at this issue.

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

The surprise

The search for answers. Although not fully get the answer I want process, but accidentally got the other things, his name is inline-block.

Right, you have no wrong, I want to say is inline-block!

In fact, we still like repeat word for word what others say, for example, I have always thought that IE7 had not the inline-block attribute, which is completely mistaken.!

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5         span { height: 100px; border: 1px solid black; }
 6         .ib { display: inline-block; }
 7     </style>
 8 </head>
 9 <body>
10     <span class="ib">Ye Xiaochai</span> <span>Ye Xiaochai</span> <span class="ib">Ye Xiaochai</span>
11 </body>
12 </html>

These are the standard browser, we to have a look at our IE7:

You see, although the middle have problem, but our inline-block is no problem!!!

The bottom middle that guy's not, you know why(layout).

The above is the line element, we look at the block level element performance.

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5         div { height: 100px; border: 1px solid black; *zoom: 1 }
 6         .ib { display: inline-block; }
 7     </style>
 8 </head>
 9 <body>
10     <div class="ib">
11         Ye Xiaochai</div>
12     <div class="ib">
13         Ye Xiaochai</div>
14     <div>
15         Ye Xiaochai</div>
16 </body>
17 </html>

We come to have a look the performance of IE7:

This guy do not ignore me ah!!! Therefore, inline-block is not without, but only on the block level elements to support the problem only, so we need to do for the block level elements:

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5         div { height: 100px; border: 1px solid black;  }
 6         .ib { display: inline-block; *zoom: 1; *display: inline; }
 7     </style>
 8 </head>
 9 <body>
10     <div class="ib">
11         Ye Xiaochai</div>
12     <div class="ib">
13         Ye Xiaochai</div>
14     <div>
15         Ye Xiaochai</div>
16 </body>
17 </html>

Although the interval between them but not, but achieved our goal. The issue came again:

Inline-block why are there strange interval?

Note the friends should see, inline-block elements are spaced in modern browsers, I engage in a long time the query is indeed!

This is because there is the interval between inline elements by default (IE7 no interval)!

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5         div { height: 100px; border: 1px solid black; margin: 0; display: inline;  }
 6     </style>
 7 </head>
 8 <body>
 9     <div class="ib">
10         Ye Xiaochai</div>
11     <div class="ib">
12         Ye Xiaochai</div>
13     <div>
14         Ye Xiaochai</div>
15 </body>
16 </html>


This problem you scratching your hair won't know why!!!

Because the block level elements into inline, change the number in the editor, the browser that wrap is a space, so they wrote together! Embarrassed

Here I no longer tied down, a copy of the code to solve the gap:

 1 .dib-wrap {
 2     font-size:0;/* All browser */
 3     *word-spacing:-1px;/* IE6,7 */
 4 }
 5 .dib-wrap .dib{
 6     font-size: 12px;
 7     letter-spacing: normal;
 8     word-spacing: normal;
 9     vertical-align:top;
10 }
11 @media screen and (-webkit-min-device-pixel-ratio:0){
12 /* Firefox LETTER-SPACING may lead to displacement elements from ordinary flow */
13      .dib-wrap{
14             letter-spacing:-5px;/* Safari does not support the font size to 0 browser, N according to the parent font adjustment*/
15     }
16 }
17 .dib {
18     display: inline-block;
19     *display:inline;
20     *zoom:1;
21 }


Well, actually I was ill... I return to the top, just have a brother and sister on my brother, now for good. . .

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Bert at November 19, 2013 - 6:10 PM