Shulou(Shulou.com)06/02 Report--

This article focuses on "how to remove floats in html5". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to remove floats in html5.

In html5, the property to clear floats is "clear". The clear attribute specifies which side of the element does not allow other floating elements, and when you set the "clear:both;" style to the floating element, you can clear the float so that floats are not allowed on the left and right sides of the element.

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

In html5, the property 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 property.

The first thing to know is that div is a block-level element that occupies a single line on the page and is arranged from top to bottom, which is the legendary flow. As shown below:

As you can see, even if the width of the div1 is small, there is room for div1 and div2,div2 on one line of the page, and it will not rank after the div1, because the div element is on a single line.

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

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

It is clear that the standard stream can no longer meet the demand, so floats are needed.

Floating can be understood as taking a div element out of the standard stream and floating on top of the standard stream, which is not the same level as the standard stream.

For example, assuming that the div2 in the figure above floats, it will deviate from the standard stream, but div1, div3, and div4 are still in the standard stream, so the div3 will automatically move up, occupy the position of the div2, and reconstitute a stream. As shown in the figure:

As can be seen from the figure, because div2 is set to float, it is no longer a standard stream. Div3 automatically moves up to replace the position of div2, and div1, div3, and div4 are arranged in turn to become a new stream. And because the float floats on top of the standard stream, div2 blocks part of the div3,div3 that looks "short".

Here div2 uses float:left;, which can be understood to be arranged on the left after floating, and float:right; on the right of course. Left and right here refer to the left and right edges of the page.

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

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

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

Let's add both div2 and div3 to the left float, as shown in the figure:

Similarly, because div2 and div3 float, they are no longer part of the standard stream, so the div4 automatically moves up to form a "new" standard stream with div1, while the float floats above the standard stream, so div2 blocks div4.

Ahem, to the point, when div2 and div3 are floated at the same time, div3 will follow div2. I wonder if the reader has noticed that up to now, div2 is floating in every example, but it doesn't follow div1. Therefore, we can draw an important conclusion:

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

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

The end near the edge of the page is the front, and the end away from the edge of the page is the back.

To help readers understand, give a few more examples.

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

According to the above conclusion, follow the dish to understand: start with div4, it finds that the above element div3 is floating, so div4 will follow div3; div3 finds that the above element div2 is also floating, so div3 will follow div2; and div2 finds that the above 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. Because it is floating on the left, the left is near the edge of the page, so the left is the front, so div2 is on the far left.

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

The reason is basically the same as the left float, but you need to pay attention to the correspondence. Because it floats to the right, the right side is near 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 effect is as follows:

Still according to the conclusion, div2 and div4 float and deviate from the standard stream, so the div3 will automatically move up to form the standard stream with div1. Div2 finds that the previous element, div1, is an element in the standard flow, so the relative vertical position of the div2 remains the same, aligned with the bottom of the div1. Div4 finds that the previous element div3 is an element in the standard flow, so the top of the div4 is aligned with the bottom of the div3, and it is always true, because as you can see from the figure, when the div3 moves up, the div4 moves up, and the div4 always ensures that its top is aligned with the bottom of the previous element div3 (the element in the standard flow).

At this point, congratulations on adding floats, but there are also clearing floats, which are very easy to understand on the basis above.

After the above study, we can see that before the element floats, that is, in the standard flow, it is arranged vertically, while after floating it can be understood as horizontal arrangement.

Clearing floats can be understood as breaking the horizontal arrangement.

The key word to clear the float is clear, which is officially defined as follows:

Syntax:

Clear: none | left | right | both

Value:

None: default value. Allow floating objects on both sides

Left: floating objects are not allowed on the left

Right: floating objects are not allowed on the right

Both: floating objects are not allowed

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

There is nothing wrong with the definition, but it is so vague that we don't know what to do.

According to the above basis, if there are only two elements div1 and div2 in the page, they are both floating on the left. The scenario is as follows:

At this point, both div1 and div2 float, and according to the rules, div2 will follow div1, but we still want div2 to be arranged under div1, just as div1 does not float and div2 floats left.

At this point, you will need to clear the clear. According to the official definition alone, the reader may try to write: adding clear:right;, to the CSS style of div1 is understood as not allowing floating elements on the right side of div1. Because div2 is a floating element, it will automatically move down one line to meet the rules.

In fact, this understanding is incorrect, and this will not have any effect. Look at the side dishes and come to a conclusion:

When it comes to CSS clear, it's important to keep in mind that this rule only affects the elements that use cleanup, not other elements.

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

According to the side dish, if you want to move div2 down, you must use floats 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 on the left side of the div2 element, div2 is forced to move down one line.

So what if there are only two elements in the page, div1 and div2, and they are both floating on the right? The reader should be able to speculate on the scene by now, as follows:

What should I do if I want to move div2 down to div1 at this point?

Again, according to the caveat, we want to move the div2, so we have to call the float in the CSS style of the div2, because the float can only affect the elements that call it.

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

At this point, I believe you have a deeper understanding of "how to remove floats in html5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.