In-depth research, explanation and expansion of CSS float floating (I)

ArticleDirectory

• Concept directory
• I. Introduction
• 2. Understanding of floating sentiment
• 3. What is the original significance of floating?
• 4. What is the essence of floating?

Author of this article: Zhang xinxu from: Zhang xinxu-xin space-xin Sheng live website address is: http://www.zhangxinxu.com concepts directory

• CSS for personal sentimentCodeEmotional Thinking
• The significance of floating personal opinions is only text display.
• The essence of personal opinion floating is "package and destruction"
• In my opinion, most floating applications do not need to be implemented.
• In my opinion, the float is actually a devil and a mixed ball.

I. Introduction

you and I have different ways of looking at things and different value orientations, because we have different world views and values. The difference in this world view is not only reflected in actual life, but also in code. The way you think about code, or the position of code in our emotional level, is different. Here I am talking about the emotional level, which has nothing to do with logic, it is independent of the algorithm (although the algorithm is subject to emotion ). This way of looking at code is accumulated in the process of continuous learning and work. It is accumulated gradually at the subconscious level, and everything comes quietly and unconsciously. After a certain period of time, we will suddenly find that we have formed our own world view and our own principles about code. Back to the "emotional level" I just mentioned, this word can also be replaced by "perceptual thinking. Generally, Program -the code is very rational and logical. It cannot match words such as emotion, but CSS is an exception. CSS also belongs to the code category and is a great kind of code, which is different from programming languages such as C and Java-there is no algorithm and no complicated logic. Therefore, CSS has inherent advantages that can penetrate into some emotional things. As I mentioned above, in most cases, this penetration is unconscious (unless someone directly reveals it-as I do now ), and the individual differences are obvious (because they belong to their own emotional things ). I found that the emotional thinking of code forms the path from being unaware of consciousness. Therefore, I personally think: emotional code is also part of the personality. Therefore, there is a subtle relationship between "CSS-emotional code-personality.

I don't know how others think about CSS. What are these attributes in their hearts, and how much emotion (or personality, character, or traits) they give to them) in these codes, have they realized that these CSS attributes are fully integrated into their emotional aspects. However, I know myself that I have added many personal colors to these CSS attributes. Such emotional things allow me to better understand CSS. I think this is not hard to understand. For example: suppose you think of each CSS attribute as your child, and each child has a different character. As you learn, you will find more characters, this is like a mother watching her children grow up a little bit. To a certain extent, her children's character will be clearly understood, and discipline will be easy. Of course, I do not have a clear understanding of all CSS attributes. I have been using CSS for a few years and I still have to learn a lot. However, I still have some feelings about the commonly used float attributes in CSS, which is also the subject of this article. This article will explain CSS float attributes from some Perceptual Perspectives. So here, you will see a different technical article.

2. Understanding of floating sentiment

My understanding of the flexibility of floating: floating is a zombie, a devil, a selfish mix that affects others. I hate floating.

3. What is the original significance of floating?

We use float to do a lot of things beyond our job, so we will be confused and we will not be able to see the true face of float. Where does floating actually mean? The answer to this question is simple. If CSS does not have a float attribute, what will it look like. We will find that we can use other CSS attributes (excluding table) to implement the Floating Method, whether in the column layout or list arrangement, the only thing that cannot be achieved is "text surround image". I cannot figure out how to display text surround images. Well, this cannot be replaced by the actual significance of float. This function is similar to the layout in word. It is a basic primitive function:

For example, the word on the left contains the float: Left attribute, Which is what float should do. This is a very important conclusion. This is the basis for a deep understanding of floating attributes. Some floating-related issues we will discuss later can be extended here. Therefore, please remember,Floating occurs only to enclose text in an image.At present, we use floating to implement the page layout. This is not the case of floating.

4. What is the essence of floating?

I define the essence of floating as "package and destruction "!

1. Floating package"
First, you should have never seen it. The floating is a display: inline-block attribute with an orientation.

Display: inline-block in a sense, the function is to wrap (WRAP), and floating also has a similar effect. For example, you may have experience implementing width adaptive buttons. The key to achieving width adaptive is to make the button size adaptive to the number of text, this requires the button to be automatically wrapped out of the text. How can we implement it? One is display: inline-block, and the other is float. For example, we want to implement the width adaptive button (for example) such as "Post" in Sina 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>
 

The result is as follows:

Float: Left Method
The only difference between the CSS code of this method and the inline-block method above is that 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>
 

The result is as follows:

You can click here: button width adaptive demo

The above example aims to show that the floating property (whether Left or Right floating) has the same effect as the display: inline-block property in a sense, so it is similarDisplay: block; float: left;When the CSS code of exceeds 95%, it is unreasonable (display: block is redundant ). However, float cannot be equivalent to display: inline-block. One of the reasons is the floating direction. display: inline-block is only a horizontal direction, that is, from left to right, float can be arranged from right to left, which is the difference between the two. However, how many situations do we need to arrange elements from right to left? Very few, so in CSS, it is not a big deal to not float this attribute, it is actually the case.

2. "destructive" of floating"
Float is the "King of destruction" in all CSS attributes ". To understand the destructive nature of floating, we must start with the original meaning of floating. I used bold italics to show the original floating meaning, that is, "It is just used to wrap text around the image. That's all ."

So, as long as you understand why the text is surrounded by images with floating attributes, you will know what I mean by floating "destructive.// The following content is the core of this article. I try to express my views as much as possible. If you are interested, you can slow down reading speed here.

Conclusion: The reason why text contains float attributes is thatFloat damages normal line boxes.

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

 
<P> This is a regular line of text. Here is a <em> em </em> label. </P>
 

This HTML code involves four boxes:
1. The first is the Containing box where the P tag is located. This box contains other boxes;

2. Then inline boxes, such as annotation,

Inline boxes does not display the content in blocks, but is arranged in a line. If the external label (span, A, cite, etc.) contains the inline attribute, it belongs to inline boxes. If it is a bald text, it belongs to the anonymous inline boxes.

3. Line boxes. See the note below:

In containing boxes, inline boxes one by one constitute line boxes. This is the key box type of floating layout, which will be described in detail below.

4. content area, see note:

Content Area is a box invisible to text. The size of the content area is related to the font-size.

Normal text/Text Mixing
By default, the image and text are in the same line: The picture is aligned with the text baseline, as shown in:

The image is an inline boxes, and the text on both sides is also inline boxes. The height of line boxes is determined by the height of the highest inline boxes, so the height of line boxes is the height of the image. At this time, the image and text are elements of the same box type (both inline boxes) and on the same line. Therefore, by default, an image can only be aligned with a line of text. To align an image with multiple lines of text, the only thing you can do is destroy the line boxes model.

Images and text with floating attributes
First look at the performance of a float: Left style added, see:

As I said just now, under normal circumstances, the image itself is an inline boxes, which together with the text inline boxes on both sides forms a line boxes. However, once the image is moved to a floating position, the situation changes completely. I think that floating has completely damaged the inline boxes feature of IMG images. At least one thing I can be sure of is that the inline boxes of the image does not exist. It is possessed by the demon and turned into a devil, and this demon is floating. Once an image loses the inline boxes feature, it cannot be placed in a row with the inline boxes text. It will be separated from the line boxes and arranged by the edges based on its own orientation attributes. This state is almost the same as that used by restriction enzymes. Line boxes has many genes (Inline boxes) on a gene chain, and then the restriction enzyme (float) will remove specific DNA sequences, this sequence (float element) is separated from the gene chain.

The floating element separated from line boxes is actually a body, an empty shell, and a representation. Because it does not have inline boxes. Some may ask, if there is no inline boxes, what's the big deal? Neither! This inline boxes is a very important concept. I have mentioned the essence of height in the article "deep understanding and application of high line-height in CSS rows". It is necessary to repeat it here.

In the current world of CSS, there are two CSS models for all the heights. One is the box-like model, and the corresponding CSS is "height + padding + margin ", the other is the line box model with the corresponding style "line-height ". The height attribute of the former can be divided into obvious height values and hidden height values. The so-called hidden height value refers to the image height. Once an image is loaded, its internal height value will take effect, even if you cannot see the word "height. While the latter is targeted at the text and other such inline boxes elements (images also belong to inline boxes, but their height is more intense than line-height, so its inline boxes height is equal to its own height, no response to line-height). The height of inline boxes is directly controlled by line-height (this is the reason for changing the line-height text to open or overlap ), the true height is the line boxes composed of a large number of inline boxes in each line (equal to the height of the highest inline box inside ), the vertical stack of these line boxes forms the height of the Containing box, that is, the height of the Div or P tag we see. Therefore, for the elements of the line box model, there is no inline boxes, and there is no height, but floating is just doing this sort of thing, it directly destroys the inline boxes of the elements, so these elements have no height.

We need the bad guys to maintain a balance in this world. In the martial arts world, it is not often the case that someone will cultivate the magic power to compete with it when it is necessary to destroy a super powerful magic head. Floating seems to be a role like this. At the beginning of the page, some pictures and texts are displayed, and the layout is also needed. One of them is text-wrapped image display, but how can this effect be achieved? A smart CSS developer creates a float attribute for cultivating "magic power". Its function is to destroy the line boxes model so that the text can be displayed around the image. Is it finally implemented? Indeed. Do you still remember the significance of floating that I have mentioned many times? It is only used to wrap text around the image. To achieve this, we need to use the floating "destructive ".

Follow the example of the image above. Float destroys the inline box of the image and produces two results: first, the image cannot be displayed in the same way as the text, instead of its original line box chain; second, there is no height (no inline box-> no line box-> no height ). And these results are exactly what is necessary for text surrounding image display.

Reason for text surround Image Display
Take a look at the following Flash animation demonstration (click the button to start ):
If Flash animation is not displayed, you may not see the original source, please visit Zhang xinxu-xin space-xin Sheng live http://www.zhangxinxu.com

The key aspect of animation demonstration is a series of analysis and explanations above, namely, "package and destruction "! A package compresses the space occupied by tags horizontally and destroys the inline box. As explained above, inline boxes is the foundation of high formation, and floating breaks down the inline boxes, so there is no height. Because the floating element does not have the inline boxes and the inline boxes height, other inline boxes elements can be reintegrated and arranged around the floating element.

Now we assume that floating does not damage inline boxes, although the image will be displayed on the left, it will form a new high envelope line (similar aggregation) with the text ), in addition, line boxes can only be formed with a line of text, and the text wrapping effect cannot be achieved, so floating damage to inline boxes is required.

We can compare floating elements with absolute positioning elements, which may help us understand. Like floating elements, absolute positioning elements also have "encapsulation", which applies to any element. So what is the difference between floating elements and absolute positioning elements? I think the main difference is that the absolute positioning element is out of the Document Stream, while the floating element is still in the document stream. The display difference caused by this is: the text entity in the Document Stream does not overlap with floating elements, but overlaps with absolute positioning elements. This is one of the important reasons for text surround display: although the actual height of the image is 0, because of its width entity (package ), similarly, the text of the content area object will not overlap with it (the external container box containing box (p, Div, UL, Li) will overlap ), this is like standing on a plant on the basketball court, although it is almost impossible to score, dribble and so on, but his entity is there, it can block individuals of the same type in the same horizontal space (that is, people) from passing through and bypassing. However, it cannot prevent the entire team from moving forward. See (firebug display ):

brief summary
although I have said so much, I personally do not think it is clear, this is because all the things involved here are invisible. Many conceptual abstract things, even if I have made an animation and made a picture, I still don't think I understand it very well. In particular, the floating element has no height. "You see, the picture is actually there. Why is there no height? Why is text detour without height ?" As a result, I will inevitably be confused by the concept of the relationship between the actual height and inline boxes. But it doesn't matter. Next I will analyze the various performances of floating elements based on the above explanation. I believe it will be helpful for a deeper understanding of floating. This article has completed only 1/3 and has a lot of content. I want to publish it in several articles.