Experience Sharing: CSS float (clear)

I have been familiar with CSS for a long time, but I am always confused about float. It may be because I have poor understanding ability, or I have never encountered a popular tutorial.

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

Preface:

Due to the large amount of CSS content, you can only explain it in a targeted manner without any effort.

If the reader understands the CSS box model but does not understand floating, then this articleArticleIt can help you.

The level of snacks is limited. This article is just an introductory tutorial. Please forgive me for any improper reasons!

This article takes Div element layout as an example.

 

Tutorial start:

 

First, you must know that DIV is a block-level element, exclusive to a row in the page, top-down arrangement, that is, the legendaryStream. For example:

 

 

 

It can be seen that even if the div1 width is small, a line on the page can hold div1 and div2, and div2 will not be placed behind div1, because the DIV element occupies an exclusive line.

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

The basic starting point of no matter how complicated the layout is:"How to display multipleDivElement".

Obviously, the standard stream can no longer meet the requirements, so floating is required.

Floating can be understood as letting a divElements are separated from the standard stream and float above the standard stream. They are not at the same level as the standard stream.

For example, if div2 is floating, it will be out of the standard stream, but div1, div3, and div4 are still in the standard stream, so div3 will automatically move up to occupy the div2 position, form a new stream.

 

 

It can be seen that div2 is no longer a standard stream because it is set to float, and div3 automatically moves upReplacementDiv2 is arranged in sequence by div1, div3, and div4 to form a new stream. Div2 blocks part of div3 because the float is floating on the standard stream, and div3 looks "short.

Here div2 uses a float (float: Left;), which can be understood as a float to the left and a float: Right. The left and right sides indicate the left and right sides of the page.

If we change div2 to the right floating mode, the following results will be displayed:

 

 

In this case, div2 is arranged on the right edge of the page and no longer blocks div3. You can clearly see the streams composed of div1, div3, and div4.

So far, we have only one Div element. What about multiple DIV elements?

Next we will add the left float to both div2 and div3.

 

 

Similarly, because div2 and div3 are floating, they no longer belong to standard streams, so div4 will automatically move up and form a "new" Standard stream with div1, while floating is floating above the standard stream, therefore, div2 blocks div4.

Keke, the key point is that when div2 and div3 are set to float at the same time, div3 will follow div2 and do not know whether the readers have discovered it until now, div2 is floating in every example, but it does not follow div1. Therefore, we can draw an important conclusion:

Assume that a divElementIs floating, ifThe previous element is also floating, soThe element will followAfterEdge(If a row does not fit the two elements,The element will be squeezed to the next line)IfThe element on the element is an element in the standard stream, soThe relative vertical position of, that is,Is always aligned with the bottom of the previous element.

DivThe order is htmlCodeDiv.

The end close to the edge of the page isBeforeAt one end of the page that is far away from the edge isAfter.

 

 

To help readers understand the problem, let's take a few more examples.

If we set div2, div3, and div4LeftFloating:

 

 

 

According to the above conclusion, we can understand it again with the dish: we analyze it from div4 first, and it finds that the above element div3 is floating, so div4 will follow div3; div3 finds that div2 is also floating, so div3 follows div2. div2 finds that div1 is an element in the standard stream, so the relative vertical position of div2 remains unchanged, the top is still aligned with the bottom of the div1 element. Because it is left floating, the left side is near the edge of the page, so the left side is the front, so div2 is on the far left.

Set div2, div3, and div4RightFloating:

 

 

The principle is basically the same as the left floating, but you need to pay attention to the relationship between the front and back. Because it is right floating, so the right side is near the edge of the page, so the right side is the front, so div2 is on the rightmost side.

Let's move div2 and div4 to the left, as shown below:

 

According to the conclusion, div2 and div4 are floating out of the standard stream, so div3 will automatically move up to form a standard stream with div1. Div2 finds that the previous element div1 is an element in the standard stream, so the vertical position of div2 remains unchanged and is aligned with the bottom of div1. Div4 finds that the last element div3 is an element in the standard stream. Therefore, the top of div4 is aligned with the bottom of div3 and is always true, because it can be seen that after div3 is moved up, div4 also follows up,Div4Always make sure that your top and last element div3 (Elements in the standard Stream)Bottom alignment.

Congratulations, you have already learned how to add float, but there is also clear floating, it is easy to understand with the above basic clear floating.

After the above learning, we can see that before the elements float, that is, in the standard stream, they are arranged vertically, and after the elements are floated, they can be understood as horizontal arrangement.

Clear floating can be understood as breaking the horizontal arrangement.

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

 

Syntax:

Clear: none | left | right | both

Valid value:

None: default value. Allow floating objects on both sides

Left: Float objects on the left are not allowed.

Right: Float objects on the right are not allowed.

Both: Float objects are not allowed.

 

The definition is very easy to understand, but the reader may find that this is not the case.

The definition is correct, but it is too vague to describe.

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

At this time, div1 and div2 are floating. According to the rule, div2 will follow behind div1, But we still want div2 to be arranged below div1, just as div1 is not floating and div2 is left floating.

In this case, the clear floating (clear) function is required. If it is defined by the official website, the reader may try to write: add clear: Right to the CSS style of div1 ;, it is understood that the right side of div1 is not allowed to have floating elements. Because div2 is a floating element, a row is automatically moved down to meet the rule.

In fact, this kind of understanding is incorrect, and it does not have any effect. Conclusion:

For CSSClear floating (clear)It must be kept in mind that this rule can only affect the elements used for clearing, but not other elements.

How can this problem be solved? Taking the above example as an example, we want to move div2, but we use clear float in the CSS style of the div1 element to try to clear the floating element (clear: right;) to force div2 to move down, this is not feasible, because this clearance floating is called in div1, it can only affect div1, not div2.

According to the conclusion of the dish, to move div2 down, you must use floating in the CSS style of div2. In this example, the left side of div2 has the floating element div1. Therefore, you only need to use clear: Left; In the CSS style of div2 to specify that the floating element is not allowed on the left side of the div2 element, in this way, div2 is forced to move down a row.

So what if there are only two elements div1 and div2 on the page, which are both right-floating? The reader should be able to speculate on the scenario as follows:

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

According to the conclusion of the dish, if we want to move div2, we must call floating in the CSS style of div2, because floating can only affect the elements that call div2.

We 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 cannot appear on the right side of div2, in this way, div2 is forced to move down a row to the bottom of div1.

 

Now, the reader has mastered the basic principles of CSS + Div floating positioning, which is sufficient to cope with common la S.

As a matter of fact, as long as the reader understands it with heart, the complicated layout can all be done through the rule summarized by the dishes.

 

Below:

 

We must solemnly declare that CSS is extremely messy, especially the compatibility problem of browsers. The level of cooking is limited. This article may be inappropriate. I hope you will forgive me.

In fact, I really don't want to write such a long article. But for the readers to understand it, I can't help but give more examples.

In order to relieve the reader's psychological pressure, this article does not have any CSS or HTML code, because many tutorials are now a lot of CSS code, so it is annoying to see it, let alone read it carefully.

Finally, I wish you a pleasant reading and a pleasant grasp of your knowledge.