CSS Floating (float,clear) Popular explanation

have been exposed to CSS a long time ago, but for the floating is always very confusing, may be the ability to understand their own poor, or may not have encountered a popular tutorial.

Some days ago the vegetable finally understand the basic principle of floating, can't wait to share to everyone.

Written in front of the words:

Because the CSS content is more, the side dishes do not have the energy to tell from beginning to end, can only have the specific explanation.

If the reader understands the CSS box model, but does not understand the float, then this article can help you.

The level of small dishes is limited, this article is just the introductory tutorial, the wrong place please forgive!

This article takes the div element layout as an example.

Tutorial Start:

First of all, you know, DIV is block-level elements, in the page exclusive line, Top-down arrangement, that is, the legendary flow. The following figure:

You can see that even if the width of the div1 is very small, a row in the page can accommodate DIV1 and DIV2,DIV2 will not be ranked behind Div1, because the DIV element is an exclusive line.

Note that these theories refer to the div in the standard stream.

The side dishes argue that no matter how complex the layout is, the basic starting point is "how to display multiple div elements on one line."

Obviously the standard stream is already unable to meet the demand, which is used to float.

A float can be understood to allow a DIV element to break out of the standard stream, float above the standard stream, and not a standard flow level.

For example, suppose the div2 floating in the figure above, it will break out of the standard stream, but Div1, Div3, Div4 are still in the standard stream, so Div3 will automatically move up, occupy the div2 position, and compose a stream again. As shown in figure:

As can be seen from the figure, because the div2 set float, so it is no longer a standard flow, Div3 automatically moved to replace the div2 position, Div1, Div3, div4 in order to become a new stream. And because the float floats on top of the standard stream, Div2 blocks a part of the Div3,div3 and looks "short".

Here the Div2 is left floating (float:left;), which can be understood as floating up and left, right floating (float:right;), of course, is arranged on the right. Here on the left, right is to say the left and right edge of the page.

If we use the div2 right float, it will be the following effect:

At this time div2 by the right edge of the page arrangement, no longer occlusion div3, the reader can clearly see the above mentioned Div1, Div3, Div4 composed of streams.

So far we've only floated a DIV element, how many?

Below we add div2 and Div3 to the left float, the effect is as shown:

Similarly, because Div2, div3 float, they no longer belong to the standard flow, so div4 will automatically move up, and div1 to form a "new" standard flow, and the float is floating on the standard stream, so div2 block div4 again.

Cough, to the point, when the Div2, Div3 set floating, Div3 will follow after Div2, do not know whether the reader has found that, until now, div2 in each case is floating, but did not follow the DIV1. Therefore, we can draw an important conclusion:

If a DIV element A is floating, if the element A is also floating, the A element will then follow the previous element (if a row does not fit the two elements, the a element will be squeezed to the next line), and the relative vertical position of a will not change if the first element of the A element is the element in the standard stream. This means that the top of a is always aligned with the bottom of the previous element.

The order of the div is determined by the order of the div in the HTML code.

Near the edge of the page is the front, away from the edge of the page is behind.

To help readers understand, give me a few more examples.

If we put Div2, Div3, Div4 are set to the left float, the effect is as follows:

According to the above conclusion, follow the side dishes to understand again: first from the DIV4 analysis, it found that the top element div3 is floating, so div4 will follow Div3; Div3 found that the upper element div2 is also floating, so Div3 will follow after Div2; Div2 found that the top element div1 is the element in the standard stream, so the div2 's relative vertical position is unchanged, and the top is still aligned to the bottom of the DIV1 element. Because it is left floating, the left side is near the edge of the page, so the left side is front, so the div2 is on the left.

If the Div2, Div3, Div4 are set to the right float, the effect is as follows:

Truth and left floating basically the same, but need to pay attention to the corresponding relationship. Because it is right to float, so the right side is close to the edge of the page, so the right side is front, so div2 on the far right.

If we float the div2 and div4 left, the effect chart is as follows:

is still based on the conclusion that Div2, Div4 float, separated from the standard flow, so Div3 will automatically move up, and div1 constitute a standard flow. Div2 found that the previous element div1 is an element in the standard stream, so div2 is relatively vertical and is aligned with the DIV1 bottom. Div4 found that the last element div3 is an element in the standard stream, so the top of the DIV4 is aligned with the bottom of the div3, and always set up, because as you can see from the diagram, after div3 up, Div4 also moves up, and div4 always guarantees its top and previous elements Div3 ( Align the bottom of the elements in the standard stream.

At this point, congratulations to the reader has mastered the addition of floating, but also the removal of floating, there are above the foundation of clear float very easy to understand.

After the study, you can see: the element floating before, that is, in the standard flow, is vertical arrangement, and after floating can be understood as horizontal arrangement.

Clearing the float can be understood as breaking the horizontal arrangement.

Clear the Floating keyword, which is officially defined as follows:

Grammar:

Clear:none | Left | Right | Both

Take value:

None: Default value. Allow floating objects on both sides

Left: Floating objects are not allowed on the left-hand side

Right: Do not allow floating object

Both: Floating objects are not allowed

The definition is very easy to understand, but the reader may find that this is not the case when it is actually used.

The definition is not wrong, but it describes too vague, let us overwhelmed.

Based on the above, if there are only two elements in the page div1, Div2, they are left floating, the scene is as follows:

At this time div1, div2 are floating, according to the rules, DIV2 will follow the div1 behind, but we still hope that div2 can be arranged under the DIV1, just as the div1 does not float, div2 left floating.

Clearing floats (clear) is used at this time, and if it is purely official, the reader may try to write: Add Clear:right to the Div1 CSS style, and understand that there are floating elements on the right side of the DIV1, because Div2 is a floating element, Therefore, a line is automatically moved down to satisfy the rule.

In fact, this kind of understanding is not correct, this does not have any effect. See the side of the cake:

For a clear float of CSS, keep in mind that this rule can only affect the element itself that uses the purge, and cannot affect other elements.

How do you understand that? Take the above example, we want to let div2 move, but we are in the DIV1 element CSS style using the purge float, trying to remove the div1 right side of the floating element (clear:right;) to force div2 down, this is not feasible, Because this purge float is invoked in Div1, it can only affect div1 and cannot affect div2.

According to the side-dishes, if you want Div2 to move down, you have to use floats in the Div2 CSS style. In this example, there is a floating element div1 on the left side of the div2, so as long as clear:left is used in Div2 CSS styles to specify that a floating element is not allowed on the left side of the div2 element, Div2 is forced to move down one line.

So if there are only two elements in the page Div1 and Div2, are they floating right? The reader should have been able to speculate on his own scene at this time, as follows:

Now if you want to let Div2 down to Div1 below, how to do?

Also, according to the tapas, we want to move the DIV2, we must call the float in the div2 CSS style, because the float can only affect the element that calls it.

You can see that there is a floating element div1 on the right side of the div2, so we can use Clear:right in div2 CSS styles to specify that floating elements are not allowed on the right side of the div2, so that Div2 is forced to move down one line to the bottom of the div1.

At this point, the reader has mastered the basic principle of css+div floating positioning, enough to cope with the common layout.

In fact, same, as long as the reader attentively experience, and then the complex layout can be summed up by the rules of the dishes to be done.

Written in the following words:

Must solemnly declare, CSS this piece extremely chaotic, especially the browser compatibility problem, the side dish level is limited, this article probably has the improper place, hoped the reader forgive me.

Actually do not want to write such a long article, but for the reader can understand, always involuntarily want to cite more examples.

In order to reduce the psychological pressure of the reader, this article does not have any CSS, HTML code, because now a lot of tutorials are a lot of CSS code, see it annoying, not to mention the fine read.