CSS layout (4) float details, css layout float details

CSS layout (4) float details, css layout float details
I. Initial Design of float

Because float was designed to be used for text wrapping. That is, a text segment in an image. After float: left, the text will surround the image.

<Div style = "width: 100px; height: 100px">  AstraZeneca, everybody, Shengli Street, is speeding up the construction of a file card settlement ticket in Kashgar. </div>

2. Multiple float features

2.1. destructive

First, let's look at two demos, for example. The first demo is a simple example, and the display effect is normal. In the second demo, the only difference is that adds float: left, while <div> on the upper layer is collapsed.

　　

However, this is the "destructive" of float-float destroys the original structure of the parent tag, causing the collapse of the parent tag. The most fundamental cause of this phenomenon is that the elements with float settings will be separated from the document stream.

A friend who first came into contact with the document stream can understand that div is the father and img is the son of it. The father and img have a good parent-child relationship. The father can show the effect of a contained relationship in a decent way. Until one day, img was set to float. God (browser) stipulates that no float element is allowed to stay in his family, so img is evicted from the house and disconnects its parent-child relationship with div. As a result, if div does not have an img son, it cannot show the Parent-Child inclusion relationship. Therefore, the two are different and irrelevant. -- Is it easy to understand this?

However, never forget the original intention of float Design-to achieve the effect of text wrapping. When a div contains text, the text is still surrounded by img. For example, after the text is surrounded, the parent element is supported.

　　

Now we know that float is destructive, and many friends may have known this feature before, but do you have any thoughts:FloatWhy is it designed to be destructive? Why is it out of the Document Stream? This is very important!In fact, the reason is very simple-in order to achieve the effect of text wrapping?

Someone may ask: ah? Didn't you say that float's original intention was to achieve the effect of text wrapping? What is the relationship with destructiveness?

At this time, I will ask you: if float does not let the parent element collapse, can the Text wrap effect be realized? Let's show you two figures.

　　

2.2. Package

For example, if a common div is not set with a width, it will fill the screen, as mentioned in the previous section on box mode. If float: left is added to the div, it suddenly becomes compact, and the width changes, and the content "Wang fupeng" is wrapped-this is encapsulation. After a div is set to float, its width is automatically adjusted to wrap the content width, instead of filling the entire parent container.

Note: Although div shows encapsulation, its display style remains unchanged or block.

　　

Here, let's review. In my previous blog, we also mentioned "package". What is the style? You can think about it here. I will give the answer in my blog comments.

　　

After knowing the package nature, we will continue to think: Why should float have the package nature? In fact, the answer needs to be searched from the original design intention of float, which is designed to achieve the effect of text wrapping. Text wrap pictures are easy to understand, but what if you want text to wrap a div? In this case, the div is not "wrapped", so how can we achieve the effect of wrapping?

2.3 clear cells

Float also has a feature that you may not be very familiar with-clear cells. According to the management, let's give an example.

　　

. In the first example, there are spaces in the middle of a normal img, because multiple labels have line breaks, and the browser recognizes spaces for behavior changes, which is also normal. In the second example, the float: left style is added to img, so that there is no space between img, and the four img are closely tied.

If you haven't noticed it before, think about whether the program you have previously written has this feature. Why is float suitable for web page layout (commonly known as "bricklayer headers ")? It is because the pages written by float are strictly seed, and a fly cannot fly in the middle.

The root cause of the "Clear grid" feature is that float will cause nodes to leave the document flow structure. It does not belong to the Document Stream structure, so it has nothing to do with any line breaks and spaces around it. It tries its best to move closer to one side, how close is to the nearest point, which is the essence of clearing cells.

3. Clear floating

Float is "destructive" and will cause the parent element to "collapse", which is not to be seen. How can we avoid the influence of float (that is, we often say "Clear floating ")? There are many methods. Here I will introduce 4 for your reference. You can choose based on your actual situation.

These two methods are relatively simple and will not be demonstrated here. If you are interested, try them by yourself.

The third method is not very common, but you need to know the clear: both thing. Adding a clear: both element below all floating elements can eliminate the destructive effects of float.

　　

The fourth method that you need to know is what you need most. It is also recommended by me. It is also the one that bootstrap is using -- clearfix -- people who do not know about it must search for it, or else it will be too low!

　　

, We define a. clearfix class, and then apply the same formula to the parent element of the float element. Is it very simple? Note: You may find different versions of clearfix, and some codes are more than the code in it. You just need to write the code according to my Paster.

The principle is to add a clear: both element after the div through the pseudo element selector, which is the same as the third method.

4.Floating applications (using float for web page layout)

1. After the float attribute is set, the elements will actually become inline-block-based.

2. Remove spaces in the arrangement.

 

After floating is set, the element becomes a block-level element.

However, the best application should allow him to achieve the effect of text wrapping, such as a single fixed Fluid layout, with float + margin.

You can use a large layout. For a small layout, you can use inline-block to build brick headers (but there is a small gap, which can be seen in specific applications). Do not abuse it whenever possible.