A brief analysis of CSS Folat

1.float??

Do not know if you remember before we talked about the page is a document flow, specifically what is the flow of the document, I will not say? So we page layout if the Div, then the block of the elements are how to arrange, what is called blocky themselves to see?

What if we were to use a div layout, you might encounter a problem?

See you there. What am I supposed to do if I want to put xxxxx in a row with Box-1? Maybe you can say that we've already said that with the positioning can be solved, but today we are talking about using float, to realize that we have to see if we add float is not realized?

Can you do that? Happiness has completely satisfied our requirements. In fact, we also often use float for horizontal typesetting, or multi-column layout in practice. In fact, there is a problem in this? I don't know if you're aware of it. In fact, the use of floating elements out of the regular flow of the document, note: In fact, the original immediately after the element will be allowed in the space, the upward elevation to the floating element flat flush.

If you have seen the W3 standard, you may find that this is not the same as the actual (we mean the use of the scene above)

The Float property defines the direction in which the element floats. Historically, this property has always been applied to images, so that text surrounds the image, but in CSS, any element can float. A floating element generates a block-level box, regardless of its own element. M

When it comes to text wrapping, we use an image to say how he achieved it. When you float a picture or other element, you are asking the browser to push it upwards until he touches the inner boundary of the parent element. The subsequent paragraph no longer considers the floating element to be positioned in front of him in the document flow. So he occupies the upper-left corner of the parent element. Text wraps around.

So what are the characteristics of float?

Enveloping. Destructive

What is a parcel of?

What if I added Folat: What would it be like?

We can not see the obvious difference ah. What's the difference between this box? In fact, this time: if the div is added float:left, it suddenly becomes compact, the width has changed, the content Wang Fu Three words wrapped-this is the package sex. When the div is set to float, its width is automatically adjusted to wrap the content width instead of the entire parent container, while the Div embodies the inclusion, but its display style is unchanged or block. What is the difference between display:inline-block and float? Float can not be equated with Display:inline-block, one of the reasons is the direction of the float, display:inline-block only a horizontal alignment, that is, from left to right, and float from right to left, which is the difference between the two. However, how many cases do we need to align elements from right to left? Very few, so, CSS, no floating this property is not a big deal of things, it's actually just that.

Destructive: (This is the copy address http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5 %e7%a0%94%e7%a9%b6%e3%80%81%e8%af%a6%e8%a7%a3%e5%8f%8a%e6%8b%93%e5%b1%95%e4%b8%80/) felt better than I said.

2. Floating "destructive"
Float can be said to be the "King of Destruction" in all CSS properties. To understand the destructive nature of floating, we should start with the most primitive meaning of floating. I put the original meaning of floating in bold italic, that is, "just to let the text around the picture, that's all." ”

So, as soon as you figure out why the text wraps around a picture with a floating property, you'll know what I mean by the floating "destructive". The following part of the text is the core of this article, many personal views, I try to articulate clearly. If you are interested, you can slow down the reading speed here.

First, the conclusion: the text is wrapped around a picture containing the float property because the float destroys the normal line boxes.

It is necessary to talk about the line boxes model first. Let's look at the following plain HTML code:

<p> This is an ordinary line of text, here is a <em>em</em> tag. </p>

This HTML code involves 4 kinds of boxes:
1, the first is the P tag containing box, this box contains the other boxes;

2, then is the inline boxes, such as labeling,

Inline boxes does not make the content appear as blocks, but is lined up, if the outer label (Span,a,cite, etc.) with the inline attribute is an inline boxes, which is an anonymous inline boxes if it is a bare text.

3, line boxes, see the mark:

In containing boxes, one of the inline boxes formed the line boxes. This is the key box type for the floating effect layout, which is described in detail below.

4. Content area, see callout:

The content area is a box that is not visible around the text. The size of the content area is related to the font-size size.

Normal picture and text mixed row
By default, the picture is mixed with the text: The picture is aligned with the text baseline, and the picture is on the same line as the text, as shown in:

, the picture is an inline boxes, and the text on both sides is inline boxes. Because the height of line boxes is determined by the height of the highest inline boxes in its interior, the height of line boxes here is the height of the image. At this point the picture and the text are the same box type elements (both inline boxes), on the same line, so, by default, a picture can only be aligned with a single line of text. To get a picture aligned with multiline text, the only thing you can do is break the normal line boxes model.

Pictures and text with floating properties
First look at a piece of the Float:left style added after the performance, see:

Just said, under normal circumstances, the picture itself is an inline boxes, and the two sides of the text inline boxes together composed of line boxes, but once the picture is added to the float, the situation is completely changed. I think it is floating completely destroyed the IMG image of the inline boxes feature, at least one thing I can be sure, the image of the inline boxes does not exist, possessed by demons, changed, and this demon is floating. Once the image has lost the inline boxes feature, it cannot be lined up with the inline boxes text, which will be detached from the line boxes and follow its own azimuth attributes. This state is almost consistent with restriction enzymes, where a gene chain (line boxes) has many genes (inline boxes), and then the restriction enzyme (float) cuts out a specific sequence of DNA, which is separated from the gene chain.

The floating element from line boxes is actually a body, an empty shell, an appearance. Because it has no inline boxes. Some people may ask, no inline boxes No bai, what is the big deal? No, not too! This inline boxes is a very important concept. I have mentioned the high nature in the article "some deep understanding and application of CSS Line high line-height", it is necessary to repeat it here.

In the current world of CSS, all heights are produced by two CSS models, one box box model, the corresponding CSS is "Height+padding+margin", the other is the line box model, the corresponding style is "line-height". The height attribute of the former is divided into the apparent height value and the hidden height value, the so-called hidden height value refers to the height of the picture, once loaded into a picture, its intrinsic height value will work, even if you do not see the word "height". and the latter for the text and other such inline boxes elements (picture also belongs to the inline boxes, but its height than line-height action more ferocious, so its inline boxes height equals its own height, no response to Line-height), The height of the inline boxes is directly controlled by the Line-height control (which is why the line-height text is pulled or overlapped), and the true height is the line composed of a large number of inline boxes per row Boxes (equals the height of the internal highest inline box), and these line boxes are stacked vertically to form the height of the containing box, which is the height of the div or P tag we see. So, for the elements of the line box model, no inline boxes, there is no height, and the float is just doing so nasty thing, it directly will be the elements of the inline boxes also destroyed, so these elements are not high.

We are in a world where the bad guys are needed to keep the balance. The martial arts world is not often to eliminate a super-ox, the Big monster, will be someone to cultivate the magic to contend with it. Floating seems to be such a role, at the beginning of the page is displayed some pictures of the text ah what, the need for a few layout, one of which is the text around the picture display, but how to achieve such a effect? Smart CSS developers create a "magic" of the float property, its role is to break the line boxes model so that text around the image display, finally realized? It's true. Remember what I said a lot about floating--just to wrap text around a picture, and to do this requires a floating "destructive".

Follow the example of the above image. Floating destroyed the image of the inline box, resulting in two results: First, the picture can not be displayed with the text, separated from its original line box chain, two is no height (no inline box, no Line box and no height). And these results are exactly what is necessary for the text to surround the image display.

Why text wraps around a picture
Let's look at the following Flash animation demo (click the button to start):

The key point that the animation demonstrates is actually a series of analysis and explanation above, namely "Parcel and destroy"! The parcel is the horizontal contraction of the space where the label occupies, and the destruction is the inline box that destroys. As explained above, the inline boxes is a highly formed foundation, and the float destroys the inline boxes and there is no height to speak of. It is because the floating element has no inline boxes, without the inline boxes height, to allow the other inline boxes elements to be re-integrated, surrounded by floating element arrangement.

We now assume that the float does not destroy the inline boxes, then although the picture will be displayed on the left, but it will form a new height envelope with the text (similar aggregation), and only with a line of text to form a line box, can not achieve text wrapping effect, so the floating damage to the inline boxes is necessary.

We can compare floating elements with absolute positioning elements to help understand them. As with floating elements, an absolutely positioned element is also "wrapped", and this "enveloping" applies to any element. So what is the difference between a floating element and an absolutely positioned element? I think the main difference is that the absolutely positioned element is out of the document flow, and the floating element is still in the document flow, and the difference in the display is that the text entity in the document flow does not overlap with the floating element, but overlaps with the absolute anchor element. This is one of the important reasons for text wrapping: Although the picture actually occupies a height of 0, but because its width entity exists (wrapped), the same content area entity text does not overlap with it (external container box containing box (P,DIV,UL,LI) overlap), it is like standing on the basketball court a vegetable, although it is almost impossible to score, dribble and so on, but his entity is there, it can block the same level of space on the same type of individuals (i.e., people) directly through, to pass, have to bypass. But it can't stop the whole team from moving forward. See (Firebug Display):

A brief analysis of CSS Folat