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

Concept Catalog

• The emotional thinking of the CSS code of personal sentiment
• The meaning of the floating of a personal point of view is only the text around the display
• The essence of the float of personal opinion is "parcel and destruction"
• Most floating applications are not floating should be done at the moment of personal opinion
• The float of personal opinion is actually a devil, a jerk.

First, Introduction

You and I look at things differently and value orientations are different because we have different world views, values. The differences in this worldview are not only reflected in real life, but also in code. The way you and I look at the code, or the code in our emotional position is not the same, I am talking about the emotional level, and logic-independent, and algorithm-independent (although the algorithm is affected by emotion). This way of looking at code is that we accumulate in the process of continuous learning and work, is gradually accumulated in the subconscious level, all quietly to, unconsciously. As we accumulate to a certain stage, we suddenly find that we have formed our own world view and our own rules about the code. Back to the "emotional dimension" I just mentioned, this word can also be replaced with "perceptual thinking". In general, the program-code is a very rational and logical thing, and perceptual-emotional such words, but CSS exceptions. CSS also belongs to the code category, and is a great code, which differs from programming languages like C,java-no algorithms, no complicated logic. As a result, CSS has the innate advantage to penetrate some sentimental emotional things. As I mentioned above, in most cases, this infiltration is unconscious (unless someone directly reveals it-as I do now) and is distinct from individual differences (because it is an emotional thing that belongs to me). Freud divides the personality into unconscious, pre-consciousness and consciousness, and I find that the emotional form of code is just the way to realize consciousness before it is gone, so I personally think: The emotional code is part of the personality. So, with the "css-emotional code-personality" this delicate relationship.

I'm not sure what other people think about CSS, what CSS attributes are in their minds, how much of their emotions (or personality or character or trait, etc.) are in the code, and whether they realize that these CSS properties are 1.1 points into their emotional stuff. But I know myself, in these CSS properties to add a lot of personal color, this emotional thing can say let me better understanding of CSS, I think it is not difficult to understand, for example: suppose you see each CSS attribute as your child, each child has a different personality, With the study you will dig more character, this is like mother watching their children grow up a little bit, to a certain extent will be their children's character to touch the clear, discipline also calmly. Of course, I do not have all the properties of CSS have a very clear emotional understanding, I use CSS for a few years ah, I have to learn a lot. However, I still have some feelings about the float properties commonly used in CSS, which is the main thrust of this article. This article will explain the CSS float properties from some of my perceptual perspectives. So here, you'll see a different kind of technical article.

Second, the floating feeling of understanding

My understanding of floating perceptual: floating is a pervert, a demon, a selfish and a jerk that affects others. I hate to float.

Third, what is the original meaning of floating?

We used float float to do a lot of things other than their own work, so we will be confused, we will be back to see the true face of float. What is the real meaning of floating? The answer to this question is simple, assuming that there is no floating (float) property in the CSS, then what will it look like? We will find that the current popular use of floating methods, whether it is the column layout, or list arrangement we can use some other CSS properties (regardless of table) instead of implementation, the only implementation is "text around the picture", I can't think of any way to let text around the picture display. Well, this irreplaceable role is the real meaning of float. This effect is similar to the layout in Word, which is based on the original effect:

For example, this word on the left contains the left floating property (Float:left), which is what floats should do. This is a very important conclusion, this is the basis for in-depth understanding of the floating property, some of the floating related problems we discussed later can be inferred from here, so, remember, the meaning of floating appear is only used to let text around the picture, that's all. and we are currently using floating to achieve the page layout is not a floating thing to do.

Iv. What is the nature of floating?

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

1. Floating "wrapping"
First of all, you should not have seen the conclusion: the floating "destructive", floating is a Display:inline-block property 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:

You can really click here: Button Width Adaptive demo

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 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.

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.

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.

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 summary
Although nagging said so much, but I personally think it is not clear, because the things involved in this is invisible, a lot of conceptual abstract things, even if I did the animation, but also with the picture, but still feel not to speak very clearly. In particular, I said that the floating element has no height, "You see, the picture is there, how is there no height?" No height for what text will detour? "So I inevitably in the actual height and the relationship between the inline boxes the concept of tossing, the more tossing and appearing more chaotic." But it doesn't matter, I will be based on the above analysis of floating elements of a variety of performance, I believe the floating in-depth understanding of the more help. This article only completed One-third, the content is more, I want to publish in a sub-article.

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