CSS float (float, clear) popular explanation and experience sharing

I came into contact with CSS a long time ago, but I was always confused about floating. It might be because of my poor understanding or because I didn’t come across a popular tutorial.

A few days ago, Xiaocai finally understood the basic principles of floating, and couldn’t wait to share it with everyone.

Words written in front:

Since CSS contains a lot of content, Xiaocai does not have the energy to explain it from beginning to end, so he can only explain it in a targeted manner.

If you understand the CSS box model but don’t understand floats, this article can help you.

My level is limited, and this article is just an introductory tutorial. Please forgive me for any inappropriateness!

This article takes the div element layout as an example.

Tutorial starts:

First of all, you should know that div is a block-level element, which occupies a single 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, div1 and div2 can fit in one line of the page, and div2 will not be placed behind div1, because the div element occupies a single 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 a row ."

Obviously, the standard flow can no longer meet the needs, so floating is used.

Floating can be understood as making a div element break away from the standard flow, float above the standard flow, and not be at the same level as the standard flow.

For example, suppose div2 in the figure above floats, then it will be out of the standard flow, but div1, div3, and div4 are still in the standard flow, so div3 will automatically move up, occupy the position of div2, and re-form a flow. As shown in the figure:

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

Here, div2 uses left floating (float:left;), which can be understood as being arranged on the left after floating, and right floating (float:right;) means of course being arranged on 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 close to the right edge of the page and no longer blocks div3. Readers can clearly see the flow composed of div1, div3, and div4 mentioned above.

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

Next, we add left floating to div2 and div3, and the effect is as shown below:

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

Ahem, here comes the point. When div2 and div3 are set to float at the same time, div3 will follow div2. I wonder if the readers have noticed that, up to now, div2 has been floating in every example, but it has not followed div1. Therefore, we can draw an important conclusion:

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

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

The end closer to the edge of the page is the front , and the end farther from the edge of the page is the back .

To help readers understand, let’s give a few more examples.

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

Based on the above conclusion, follow Xiaocai to understand it again: start analyzing from div4, it finds that the upper element div3 is floating, so div4 will follow div3; div3 finds that the upper element div2 is also floating, so div3 will follow 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. Because it is left floating, the left side is close to the edge of the page, so the left side is in the front, so div2 is at 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 left floating, but you need to pay attention to the correspondence between the front and the back. Because it is right floating, the right side is close to the edge of the page, so the right side is in front, so div2 is at the far right.

If we float div2 and div4 to the left, the effect will be as follows:

Still according to the conclusion, div2 and div4 float and are out of 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, as can be seen from the figure, after div3 moves up, div4 also moves up, div4 always ensures that its top is aligned with the bottom of the previous element div3 ( an element in the standard flow) .

At this point, congratulations to the readers for having mastered adding floats, but there is also clearing floats. With the above basic knowledge, clearing floats is very easy to understand.

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

Clearing floats can be understood as breaking the horizontal alignment.

The keyword for clearing floats is clear, and the official definition is as follows:

grammar:

clear : none | left | right | both

Value:

none : The default value. Allows floating objects on both sides

left: No floating objects are allowed on the left

right : No floating objects are allowed 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 they actually use it.

The definition is not wrong, it's just that it's too vague and leaves us at a loss.

Based on the above foundation, if there are only two elements div1 and div2 on the page, both of which are left floating, the scenario is as follows:

At this time, div1 and div2 are both floating. According to the rules, div2 will follow div1, but we still want div2 to be arranged under div1, just like div1 is not floating and div2 floats to the left.

At this time, clearing the float is needed. If you simply follow the official definition, the reader may try to write it like this: add clear:right; in the CSS style of div1, which means that floating elements are not allowed to the right of div1. Since div2 is a floating element, it will automatically move down one line to meet the rule.

In fact, this understanding is incorrect and it will not have any effect. See the side dishes:

For CSS clear float , it is important to remember that this rule can only affect the element itself that uses the clear, and cannot affect other elements.

How do you understand it? Take the example above, 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 of div1 (clear:right;). This is not feasible because the clear float is called in div1, it can only affect div1, not div2.

According to Xiaocai's conclusion, if you want to move div2 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. Therefore, just 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, so that div2 is forced to move down one line.

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

At this time, if you want to move div2 down to below div1, how should you do it?

Also according to 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, so 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 line and be placed below div1.

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

In fact, no matter how things change, the essence remains the same. As long as the readers pay attention, even the most complex layout can be handled using the rules summarized by Xiaocai.

Written at the end:

I must solemnly declare that CSS is extremely confusing, especially the browser compatibility issue. My level is limited, and this article may contain inappropriate content. I hope readers will forgive me.

Actually, I really don’t want to write such a long article, but for the readers to understand, I can’t help but give more examples.

In order to reduce the psychological pressure on readers, this article does not contain any CSS or HTML code, because many tutorials now start with a lot of CSS code, which is annoying to just look at, let alone read carefully.

Finally, I wish readers a happy reading and happy acquisition of knowledge.