CSS Float Property Pee--"floating" raw water

Learning CSS for some time, the time to summarize, is a review of the content and share. If there is anything bad about it, but beg for a light spray ~ ~ ~

One, what is float?

To answer the question of what float is, the answer is no more than an official answer, so here's a quote from the official document:

Floats. In the float model, a box was first laid out according to the normal flow, then taken out of the flow and shifted to the LE FT or right as far as possible. Content may flow along the side of a float.

By virtue of I have just been English level six to try to translate, everyone try to read with me:

In a floating model, the box model is placed first according to normal document flow, then extracted from the normal flow of documents and moved as far as possible to the left or right. The content is laid out along the float (element).

Well, the English show is over, first of all to clarify several related concepts:

Document flow: The flow of document flows, the document is in accordance with what flow in sequence, in the HTML Chinese document flow is the order of the elements from top to bottom;

Out-of-document flow: Extracted from the normal flow of documents (taken out);

Move to left/right: the left or right side is the left or right side of the parent element, the float element moves to the left or to the right to know it touches another floating element or touches the boundary of the parent element.

The official documentation clearly tells us that the float element is out of the normal flow of the document (taken out of the flow), but presumably there is confusion about the concept of float out of the document stream, because in some facts What we see is that the float element is also honestly in the flow of the document, completely out of the meaning of the flow of the document. In order to explain this concept, we are now beginning to explain it gradually.

Second, the "collapse" of float

Let's start with a simple example.

HMTL Markup

<class= "wrap">    <class= " Num1 "></div>  </div>

CSS Code

    . Wrap{    border:1px solid black;     Width:200px;    }     . num1{    background-color: red;     Height:100px;     width:100px;    }

The parent element Div does not have a height set because the div of the child element will open the div of the parent element, as follows:

If the. Num1 left floats, it will get the often said "collapse", the effect is as follows:

Obviously, the collapse is the result of the parent element not being stretched after the child element floats. In this example, there is only one div, and after the Div floats, the parent's Div can no longer be stretched, and the parent element's div height is zero. It can be understood that there is a balloon that will collapse and put in something that will be propped up if you don't put something in it. , when not put anything, the balloon is flat, when put into things, the balloon will be propped up, when the set float, it is tantamount to take out the thing, no matter what it has in the outside, will not affect the flat balloon, the balloon is still flat.

Third, let the damage come more violently

As we all know, float is a very destructive property, but the purpose of the original design of the float is not for these strange things, but for the picture and text mixed, the following first look at a picture and text mix of examples, and then from the example to draw conclusions, and then the conclusion to explain the principle:

HTML Markup

  <P>I'll show you the love.<imgsrc= "./Su-eun love. jpg"alt=""/>No one of you cares about me.</P>  <P>Su-eun love to die fast</P>  <P>Su-eun love to die fast</P>  <P>Su-eun love to die fast</P>  <P>It's important to say three times.</P>

CCS Code

None

The effect is as follows:

After adding a left float to the picture,

CSS Code

    p img{    float: left;    }

The effect is as follows:

Under normal circumstances, the picture is displayed with the text counterparts, that is, the bottom of the picture and the text of the baseline alignment, the picture left floating after the text began to surround the picture, at the same time, the picture has no height. "The picture has no height?" Tease me. The two of them were just standing there in the show and loving each other. "But it does not have height, we will explain later."

Why does the text wrap around the picture? Why is the picture not high? To explain these questions, it appears that the line box and the inline box appear.

Let's look at the inline box and line box in this example:

Inline box is displayed, if the label containing the inline box property, such as A,span, is an inline box, the above IMG is an inline box, and if none of the labels are bare, the anonymous inline box Just like the two paragraphs above that were separated by IMG are anonymous inline boxes, and a line box is formed by an inline box, as shown in.

Then there is the Showtime to explain the questions raised above.

Because float is destructive, when you set float to IMG, it destroys the inline box property of IMG and destroys the entire line box because IMG has no inline box properties, so IMG cannot be aligned with the text. IMG is detached from the line box to the left, and because the height is determined by the line box, because IMG does not have the inline box, so there is no Line box, so there is no height. So you see, this img is really no height, although looking very embarrassed ...

Four, float in the end there is no document flow out

Finally came back to the question at the very beginning: does float ever get out of the document stream.

According to the official documentation at the beginning, float is out of the flow of the document, and since it is out of the flow of the document, it is equivalent to non-existent, the other element is positioned to have nothing to do with it, it is far from it, even overlapping it is not a problem, because it is out of the flow of documents. But let's look at the facts in the browser.

We still take the show love after floating for example.

Let's look at the first P:

Look at a p again:

This is also true of the three P below. As we can see, these p boxes are positioned from the left side of the browser and are positioned without this img, and the positioning and IMG are not the same, so it can be concluded that floating is really out of the flow of the document. Well, the official documentation is right. But you can yell, "Why don't you start with the left of the browser?" Why doesn't the text start at the far left of the browser! Why doesn't the text start at the far left of the browser! "Well, I can only explain this to you, and I explain it to myself: there is no reason why, it is so, the box is not visible when the positioning of the floating element, but the text inside the box can see the floating elements." Please read it aloud three times: The box is not visible when the floating element, but the text inside the box can see the floating elements, the box is not visible when the floating element, but the text inside the box can see the floating elements, the box is not visible when the floating element, but the text inside the box can be seen floating elements.

Does the floating element actually leave the document flow? The answer is, out of the flow of the document, but the box can't see the floating elements, the text inside the box can see the floating elements.

To compare the understanding, let's take a look at absolute positioning.

Say absolute before we look at the official explanation:

In the absolute positioning model, a box was removed from the normal flow entirely (it had no impact on later siblings) and Assigned a position with respect to a containing block.

As you can see, absolute positioning is also out of the flow of documents, but there is a degree of adverb entirely, and that this and float out of the document flow what is the difference?

Let's take Shoone as an example to illustrate the comparison:

We delete the float:left, plus the absolute positioning, as follows:

Ah yo I go, word of word? Amount, change the transparency of the picture try first, add a opacity:0.4 to the IMG, the effect is as follows:

Appeared, to say three times the important words appeared. The eyes of the masses are sharp, the difference between the absolute positioning of the out-of-document flow and the floating out-of-document flow is obvious. Let's take a look at the browser viewer:

Absolute positioning of the out-of-document flow box and the text in the box are arranged by the left-hand side of the browser, and also remember the float's out-of-document, one is the box and the box text in the leftmost arrangement, one is only the box from the left, the box inside the text is arranged around the picture.

"The most left?" Where is the leftmost? The left is clearly spaced. "Well, do not remove the default margin:

You should be happy about this.

Five, clear floating

Although floating can achieve a specific layout, but clear floating is also necessary, clear method is natural. On the net on the clear floating explanation a lot, no longer detailed list, only give three ways of code:

First bring in the pre-purge:

HTML Markup

 <  div  class  = "Wrap"     >  <  div  class  = "NUM1"  ></ div     >  <  div  class  = "num2"  ></ div   >  </ div  >  

CCS Code

    . Wrap{    border:1px solid black;     Width:200px;    }     . num1{    background-color: red;     Height:100px;     width:100px;     float: left;    }

The effect is as follows:

To clear a floating effect:

1, the simplest way to clear the layout is to add an empty div, and then Clear:both:

2, to the parent use overflow hidden or auto;

3, Tall on the Clearfix:

  . Clearfix:before,  {     content: ".";      Display: block;      height: 0;      Visibility: hidden;  } {clear: both;}     {zoom: 1 */* *   

Six, a small knot

Not too much to say, but the summary is still to be:

1, floating will cause the parent element collapses;

2, floating really out of the document flow, and destroyed the line box;

3, no floating box is invisible floating elements, but the text inside the box can see the floating elements, invisible when the floating element does not exist, see the natural when the floating element is there;

4, absolute positioning, boxes and boxes inside the text are invisible floating elements;

5, Su-eun love to die fast.

Welcome to criticize the Exchange ~ ~ ~

CSS Float Property Pee--"floating" raw water