What is the attribute that clears floats in html5?

In HTML5, the attribute to clear floats is "clear". The clear attribute specifies which side of the element does not allow other floating elements. When the "clear:both;" style is set to the floating element, the floating element can be cleared so that neither the left or right sides of the element are allowed to float.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In HTML5, the attribute to clear floats is "clear".

The clear attribute specifies which side of the element does not allow other floating elements

Let’s take a closer look at the clear attribute.

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

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

Note that the above theories refer to divs in the standard flow.

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

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

Floating can be understood as letting a DIV element from getting away from the standard flow, floating on the standard flow, and the standard flow is not a level.

For example, assuming that div2 in the picture above floats, it will break away from the standard flow, but div1, div3, and div4 are still in the standard flow, so div3 will automatically move upward, occupy the position of div2, and re-form a flow. As shown in the picture:

As can be seen from the picture, since div2 is set to float, it no longer belongs to the standard flow. div3 automatically moves up to replace the position of div2. div1, div3 and div4 are arranged in sequence and become a new flow. And because floats float above the standard flow, div2 blocks part of div3, and div3 looks "short".

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

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

At this time, div2 is arranged on the right edge of the page and no longer blocks div3. Readers can You can clearly see the flow composed of div1, div3, and div4 mentioned above.

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

Next, we add left floating to both div2 and div3. The effect is as follows:

Similarly, since div2 and div3 are floating, they no longer belong to Standard flow, so div4 will automatically move up and form a "new" standard flow with div1, and floating is floating on the standard flow, so div2 blocks div4.

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

If a certain div element A is floating, and if the previous element of the A element is also floating, then the A element will follow the previous element. (If these two elements cannot be placed in one row, the A element will be squeezed to the next row); if the previous element of the A element is an element in the standard flow, then the relative vertical position of A will not change, that is to say, the top of A Always aligned with the bottom of the previous element.

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

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

To help readers understand, here are a few more examples.

If we set div2, div3, and div4 to float left, the effect is as follows:

Based on the above conclusion, follow Xiao Cai to understand it: start with the analysis of div4, it found that the upper element div3 is floating, so div4 will follow div3; div3 found that the upper element div2 is also floating, so div3 will Following div2; and div2 finds that the upper element div1 is an element in the standard flow, so the relative vertical position of div2 remains unchanged, and the top is still aligned with the bottom of the div1 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 div2 is on the far left.

If div2, div3, and div4 are all set to float right, the effect is as follows:

The principle is basically the same as floating left, but you need to pay attention to the before and after Correspondence. Since it is floating right, the right side is close to the edge of the page, so the right side is the front, so div2 is on the far right.

If we float div2 and div4 to the left, the rendering is as follows:

It is still based on the conclusion that div2 and div4 are floating and deviated from the standard flow, so div3 will automatically move up and form a standard flow with div1. div2 finds that the previous element div1 is an element in the standard flow, so the relative vertical position of div2 remains unchanged and is aligned with the bottom of div1. div4 finds that the previous element div3 is an element in the standard flow, so the top of div4 is aligned with the bottom of div3, and this is always true, because as can be seen from the picture, after div3 moves up, div4 also moves up, and div4 always moves up. It is to ensure that the top of itself is aligned with the bottom of the previous element div3 (an element in the standard flow).

At this point, congratulations to the readers who have mastered adding floats, but there is also clearing floats. Clearing floats is very easy to understand based on the above foundation.

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. Floating objects are allowed on both sides

left : Floating objects are not allowed on the left side

right : Floating objects are not allowed on the right side

both : Floating objects are not allowed

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

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 div1 and div2 on the page, they are both left-floating. The scenario is as follows:

At this time div1, Both div2 are floating. According to the rules, div2 will follow div1, but we still want div2 to be arranged below div1, just like div1 is not floating and div2 is floating 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 div1, which means that the right side of div1 is not allowed. There are floating elements. Since div2 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 Xiaocai’s conclusion:

        Regarding CSS clear float (clear), you must remember: this rule can only affect the element itself that is cleared, and cannot affect other elements.

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

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

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

If you want div2 to move down to div1, what should you do?

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

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

Related recommendations: "html video tutorial"

The above is the detailed content of What is the attribute that clears floats in html5?. For more information, please follow other related articles on the PHP Chinese website!