CSS Floating (float,clear) popular explanation (i)

Written in front of the words:

As a result of more CSS content, small series has no energy to speak from beginning to end, can only be targeted to explain.

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

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.

No matter how complex the layout is, the basic starting point is "how to display multiple div elements on a single line," says the small knitting.

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 have only floated a DIV element, multiple of it.

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 small series to understand: first from the DIV4 analysis, it found that the top element div3 is floating, so div4 will follow Div3; Div3 found the upper element div2 is also floating, so Div3 will follow after Div2 While Div2 finds that the top element div1 is an element in the standard stream, 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.

Want to learn more Web front-end development knowledge, welcome to join the Web Development Communication Group-8 (Group No.: 143046757) for more information ~