Detailed graphic and text explanation of css float-float/clear

Tutorial begins:

First of all, you must know that p is a block-level element, occupying an exclusive line on the page and arranged from top to bottom, which is the legendary flow. As shown below:

It can be seen that even if the width of p1 is very small, one line on the page can accommodate p1 and p2, and p2 will not be ranked behind p1, because p Elements are on their own line.

Note that the above theories refer to p in the standard stream.

Xiaocai believes that no matter how complex the layout is, the basic starting point is: "How to display multiple p elements in one line."

It is obvious that the standard stream can no longer meet the demand, so floating must be used.

# Floating can be understood as letting a certain P from getting rid of the standard flow, floating on the standard flow, and the standard flow is not a level.

For example, assuming that p2 in the above figure floats, it will break away from the standard stream, but p1, p3, and p4 are still in the standard stream, so p3 will automatically move upward and occupy the position of p2. Reassemble a stream. As shown in the picture:

As can be seen from the picture, since p2 is set to float, it no longer belongs to the standard stream, and p3 automatically moves up to replace At the position of p2, p1, p3, and p4 are arranged in order to become a new stream. And because the float floats above the standard flow, p2 blocks part of p3, and p3 looks "short".

Here p2 uses left floating (float:left;), which can be understood as floating to the left and then floating to the right (float: right;) Of course, it is arranged on the right. The left and right here refer to the left and right edges of the page.

If we float p2 to the right, the effect will be as follows:

At this time, p2 is arranged on the right edge of the page and p3 is no longer blocked. Readers can You can clearly see the flow composed of p1, p3, and p4 mentioned above.

So far we have only floated one p element, how about more?

Next we add left floating to both p2 and p3, the effect is as follows:

Similarly, since p2 and p3 float, they no longer belong to the standard stream, so p4 will It automatically moves up and forms a "new" standard stream with p1, and floats on the standard stream , so p2 blocks p4 again.

Ahem, here comes the point. When p2 and p3 are set to float at the same time, p3 will follow p2. I don’t know if readers have noticed that until now, p2 is floating in every example. , but it does not follow p1. Therefore, we can draw an important conclusion:

     If a p element A is floating, if the A element is the previous The element is also floating, so the A element will follow the trailing side of the previous element (If these two elements cannot be placed in one line, Then the A element will be squeezed to the next line); if the previous element of the A element is an element in the standard stream, then the relative verticality of A The position will not change, that is to say, the top of A is always aligned with the bottom of the previous element.

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

           The end close to the edge of the page is front, and the end far away from the edge of the page is back.

In order to help readers understand, let’s give a few more examples.

If we set p2, p3, and p4 to left floating, the effect is as follows:

Based on the above conclusion, follow Xiaocai understands it: start with p4 and analyze it. It finds that the upper element p3 is floating, so p4 will follow p3; p3 finds that the upper element p2 is also floating, so p3 will follow p2; and p2 finds that the upper element p2 is also floating, so p3 will follow p2. The element p1 is an element in the standard stream, so the relative vertical position of p2 remains unchanged, and the top is still aligned with the bottom of the p1 element. Since it is left floating, the left side is close to the edge of the page, so the left side is the front, so p2 is on the far left.

If p2, p3, and p4 are all set to right floating, the effect is as follows:

Principle It is basically the same as left floating, but you need to pay attention to the corresponding relationship before and after. Since it is floating right, the right side is close to the edge of the page, so the right side is front, so p2 is on the far right.

If we float p2 and p4 to the left, the effect diagram is as follows:

Still based on the conclusion, p2 and p4 are floating and out of the standard flow, so p3 will automatically move up and form a standard stream with p1. p2 finds that the previous element p1 is an element in the standard stream, so the relative vertical position of p2 remains unchanged and is aligned with the bottom of p1. p4 finds that the previous element p3 is an element in the standard stream, so the top of p4 is aligned with the bottom of p3, and this is always true, because it can be seen from the figure that after p3 moves up, p4 also moves up, p4Always ensure that the top of itself is aligned with the bottom of the previous element p3 (element in the standard stream).

At this point, congratulations to the reader who has mastered adding floats, but there is still clearing floats. Clearing floats is very easy to understand based on the above.

After the above study, it can be seen that before the elements are floated, that is, in the standard flow, they are arranged vertically, and after floating, they can be understood as horizontal arrangements.

              Clearing floats can be understood as breaking the horizontal arrangement.

The keyword for clearing floats is clear. The official definition is as follows:

Syntax:

clear: none | left | right | both

Value:

none: Default value. Allow floating objects on both sides

left : No floating objects on the left

right : No floating objects on the right

both : No Floating objects are allowed

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

There is nothing wrong with the definition, but it is too vague and leaves us at a loss.

Based on the above basis, if there are only two elements p1 and p2 on the page, they are both left-floating. The scenario is as follows:

At this time, p1, p2 is both floating. According to the rules, p2 will follow p1, but we still hope that p2 can be arranged below p1, just like p1 does not float and p2 floats left.

At this time, clear float (clear) is used. If it is purely based on the official definition, readers may try to write like this: add clear:right; to the CSS style of p1, which means that the right side of p1 is not allowed. There are floating elements. Since p2 is a floating element, it will automatically move down one line to meet the rules.

In fact, this understanding is incorrect, and it has no effect. Let’s take a look at the conclusion:

​​

For CSS’s clear float (clear), be sure to remember: this rule can only affect the element itself that uses clearing, not the element itself. Affect other elements.

How to understand? Take the above example, we want p2 to move, but we use clear float in the CSS style of the p1 element, trying to force p2 to move down by clearing the floating element to the right of p1 (clear:right;) , this is not feasible, because this clear float is called in p1, it can only affect p1, not p2.

According to Xiaocai’s conclusion, if you want p2 to move down, you must use float in the CSS style of p2. In this example, there is a floating element p1 on the left side of p2, so as long as you use clear:left; in the CSS style of p2 to specify that floating elements are not allowed to appear on the left side of the p2 element, p2 will be forced to move down one line.

So what if there are only two elements p1 and p2 on the page, and they are both right-floating? Readers should be able to guess the scene by themselves at this time, as follows:

At this time, if you want to move p2 down to p1, what should you do?

Also based on Xiaocai’s conclusion, if we want to move p2, we must call float in the CSS style of p2, because float can only affect the element that calls it.

It can be seen that there is a floating element p1 on the right side of p2, then we can use clear:right; in the CSS style of p2 to specify that floating elements are not allowed to appear on the right side of p2, so that p2 is forced to move down. One row, arranged below p1.

The above is the detailed content of Detailed graphic and text explanation of css float-float/clear. For more information, please follow other related articles on the PHP Chinese website!