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

This article mainly explains the "CSS floating float attribute how to use", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "CSS floating float attribute how to use" it!

Detailed explanation of CSS floating float property

I came into contact with CSS a long time ago, but I am always very confused about floating, either because of my poor understanding or because I failed to meet a popular tutorial.

A few days ago, I finally understood the basic principles of floating, and I can't wait to share it with you.

The words written in the front:

As the CSS content is more, there is no energy to talk about it from beginning to end, only targeted explanation. If the reader understands the CSS box model but does not understand floats, then this article can help you. The level of small dishes is limited, this article is only an introductory tutorial, please forgive me if it is inappropriate! This paper takes the layout of p elements as an example.

The tutorial begins:

First of all, it is important to know that p is a block-level element that occupies a single line on the page, arranged from top to bottom, that is, the legendary flow. As shown below:

As you can see, even if the width of p1 is very small, a row in the page can hold p1 and p2jinp2 will not come after p1, because the p element has an exclusive line.

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

Small dish believes that no matter how complex the layout, its basic starting point is: "how to display multiple p 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 p 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 p2 floats in the figure above, it will deviate from the standard stream, but p1, p3, and p4 are still in the standard stream, so p3 will automatically move up, occupy the position of p2, and reconstitute a stream. As shown in the figure:

As can be seen from the figure, because p2 is set to float, it is no longer a standard stream. P3 automatically moves up to replace the position of p2, and p1, p3 and p4 are arranged in turn to become a new stream. And because the float floats on top of the standard stream, p2 blocks part of the p3 and p3 looks "shorter".

Here p2 uses left floating (float:left;), which can be understood as floating to the left, and right floating (float:right;) to the right of course. Left and right here refer to the left and right edges of the page.

If we float p2 to the right, it will have the following effect:

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

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

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

Similarly, because p2 and p3 float, they are no longer part of the standard stream, so p4 automatically moves up to form a "new" standard stream with p1, and the float floats above the standard stream, so p2 blocks p4.

Ahem, to the point, when p2 and p3 are floated at the same time, p3 will follow p2. I don't know if the reader has noticed that p2 has floated in every case up to now, but not after p1. Therefore, we can draw an important conclusion:

If a p element An is floating, 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 last 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 p is determined by the order of p 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 p2, p3 and p4 to float on the left, the effect is as follows:

According to the above conclusion, follow the small dish to understand: start with p4, it finds that the above element p3 is floating, so p4 will follow p3; p3 finds that the above element p2 is also floating, so p3 will follow p2; while p2 finds that the above element p1 is an element in the standard flow, so the relative vertical position of p2 remains unchanged, and the top is still aligned with the bottom of p1 element.

Because it is floating on the left, the left is near the edge of the page, so the left is the front, so p2 is on the far left.

If p2, p3, and p4 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 is floating on the right, the right side is near the edge of the page, so the right side is the front, so p2 is on the far right.

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

Still according to the conclusion, p2 and p4 float and deviate from the standard stream, so p3 will automatically move up to form the 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 the same, aligned with the bottom of p1. P4 finds that the previous element p3 is an element in the standard flow, so the top of p4 is aligned with the bottom of p3, and it is always true, because as you can see from the figure, after p3 moves up, p4 moves up. P4 always ensures that its top is aligned with the bottom of the previous element p3 (the element in the standard stream).

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. The official definition is as follows: syntax: clear: none | left | right | value of both: none: default. Allow floating objects on both sides left: no floating objects on the left right: no floating objects 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 p1 and p2 in the page, they are both floating on the left, and the scenario is as follows:

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

At this point, clear floats (clear) will be used. If only according to the official definition, the reader may try to write: adding clear:right;, to the CSS style of p1 is understood as not allowing floating elements on the right side of p1. Because p2 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? Take the example above, we want to make p2 move, but we use clear floats in the CSS style of p1 element, trying to force p2 to move down by clearing the floating element (clear:right;) to the right of p1, which is not feasible, because this cleanup float is called in p1, it can only affect p1, not p2.

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

So what if there are only two elements p1 and p2 on the page, and they both float 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 p2 down to below p1 at this point?

Again, according to the side dish conclusion, if we want to move p2, we must call the float in the CSS style of p2, because the float can only affect the elements that call it.

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

At this point, readers have mastered the basic principles of CSS+p floating positioning, which is enough to cope with common layouts.

As a matter of fact, everything remains unchanged, as long as the reader understands it attentively, no matter how complex the layout can be solved by summing up the law.

Thank you for your reading, the above is the content of "how to use the CSS floating float attribute". After the study of this article, I believe you have a deeper understanding of how to use the CSS floating float attribute, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.