Deep research, elaboration and expansion of CSS float float

Deep research, elaboration and expansion of CSS float float (i)

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=583

First, what is the original meaning of floating?

the meaning of floating is only used to wrap text around a picture, that's all. and we are currently using floating to achieve the page layout is not a floating thing to do.

Second, what is the nature of the float?

I define the nature of the float as "wrapping and destroying"!

1. Floating "wrapping"
Despite the floating "destructive", floating is a display:inline-block attribute with azimuth.

Display:inline-block is a way of wrapping (wrap), and floating has a similar effect. For a common example, perhaps you have the experience of implementing the Width Adaptive button, the key to achieve the width adaptive is to make the size of the button adaptive to the number of words, which requires the button to automatically wrap the text outside. What method do we use to achieve it? One is Display:inline-block, and the other is float. For example, we want to implement the width-adaptive buttons such as "publishing articles" in Sina's blog:

The background image is:

Display:inline-block method

The CSS code is as follows:

. btn1{Display:inline-block; Background:url (Http://www.zhangxinxu.com/study/image/sina_gray_btn.png) No-repeat left top; padding-left:3px; Color: #000000; font-size:12px; Text-decoration:none;}. BTN1 cite{display:block; line-height:26px; padding:0 13px 0 10px; Background:url (http://www.zhangxinxu.com/study/image/sina_gray_btn.png) No-repeat right top;}

The HTML code is as follows:

<a href= "javascript:void (0); class=" Btn1 "><cite>inline-block method </cite></a>

Results such as:

Float:left method
The CSS code of this method is only different from the Inline-block method above, which is float:left;

The CSS code is as follows:

. btn1{Float:left; background:url (http://www.zhangxinxu.com/study/image/sina_gray_btn.png) No-repeat left Top padding-left:3px; Color: #000000; font-size:12px; Text-decoration:none;}. BTN1 cite{display:block; line-height:26px; padding:0 13px 0 10px; Background:url (http://www.zhangxinxu.com/study/image/sina_gray_btn.png) No-repeat right top;}

The HTML code is as follows:

<a href= "javascript:void (0); class=" Btn1 "><cite>float method </cite></a>

Results such as:

The above example is intended to show that a floating property, whether left-floating or right-floating, is, in a sense, identical to the Display:inline-block property, so display:block; float:left; there is no justification for a CSS code similar to more than 95% (display: Block is redundant). However, float cannot 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 can be left-to-right , this 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.

2. Floating "destructive"
To understand the destructive nature of floating, we should start with the most primitive meaning of floating.

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.

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 CSS world, 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.

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.

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.

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):

Deep research, elaboration and expansion of CSS float float