Preface: I have been in touch with CSS for a long time, but I have always been very confused about floating, perhaps because of my poor understanding ability, or because I failed to meet a popular tutorial.

A few days ago xiao CAI finally understand the basic principle of floating, can’t wait to share with you.

The words written in the front:

Because CSS content is relatively large, side dishes do not have the energy to explain from beginning to end, can only be targeted.

If the reader understands the CSS box model, but not floats, then this article will help you.

The level of side dishes is limited, this article is just an introductory tutorial, improper place please forgive!

This article uses the layout of a DIV element as an example.

Tutorial start:

The first thing to know is that divs are block-level elements that occupy a single line on the page, arranged from top to bottom, known as streams. The diagram below:

As you can see, even if div1 is small enough to fit both div1 and div2 on a single line of the page, div2 is not ranked after div1 because the div element is the only one on the line.

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

The basic starting point for any layout, no matter how complex, is “how to display multiple div elements on a single line.”

It is clear that the standard flow is no longer sufficient, and this is where floating comes in.

Float can be thought of as having a div**** element float above the standard flow, not on the same level as the standard flow.

For example, if div2 in the figure above floats, it will leave the standard flow, but Div1, DIV3, and DIV4 are still in the standard flow, so Div3 will automatically move up to take div2’s place and form a new stream. As shown in figure:

As you can see from the figure, div2 is no longer a standard stream because it is floating, and Div3 automatically moves up to replace Div2. Div1, DIV3, and DIV4 are arranged in order to become a new stream. And because the float floats on top of the standard flow, div2 blocks part of Div3, which looks “shorter”.

Div2 uses the left float (float:left; Float to the left, float to the right It’s on the right, of course. By left and right, we mean the left and right edges of the page.

If we float div2 right, it will look like this:

At this point, Div2 is arranged by the right edge of the page, no longer blocking Div3, and readers can clearly see the flow composed of div1, DIV3 and DIV4 mentioned above.

So far we’ve only floated one div element. How many?

Let’s add left float to div2 and div3.

Similarly, since div2 and DIV3 float, they are no longer part of the standard stream, so DIV4 will automatically move up and form a “new” standard stream with Div1, while the float floats above the standard stream, so Div2 blocks Div4.

When you float div2 and div3 at the same time, div3 floats after div2. Up to now, div2 has been floating in every example, but not after div1. Therefore, we can draw an important conclusion:

Let’s say a divElements of AIs floating, if AThe element above the element is also floating, so AThe element will follow the previous elementafterEdge (If you can’t fit these two elements in A row, then AElements are squeezed to the next line.); If AElement is an element in the standard flow, so AThe relative vertical position of phi does not change, which means AThe top of the element is always aligned with the bottom of the previous element.

divThe order is HTMLThe order of div**** in the code is determined.

One end near the edge of the page isbeforeAt the far end of the page isafter.

Let me give you a few more examples to help you understand.

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

Div3 is a floating element, so div4 will follow after div3. Div3 finds that the upper element div2 also floats, so div3 will follow div2; Div2 finds that the upper element div1 is in the standard flow, so the relative vertical position of div2 remains the same, and the top is still aligned with the bottom of the div1 element. Since it floats left, with the left near the edge of the page, the left is front, so DIV2 is at the far left.

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

The truth is basically the same as left float, but need to pay attention to the corresponding relationship before and after. Since it floats right, the right is near the edge of the page, so the right is front, so DIV2 is at the far right.

If we float div2, div4 left, the effect is as follows:

Again according to the conclusion, div2 and DIV4 float out of the standard stream, so Div3 will automatically move up and form the standard stream with Div1. Div2 finds that the previous element, div1, is in the standard flow, so div2 remains relatively vertical, aligned with the bottom of div1. Div4 finds that the previous element, div3, is in the standard stream, so the top of div4 is aligned with the bottom of div3, and always holds, because as you can see from the figure, div4 moves up after div3 moves up, **div4**** always keeps its top aligned with the bottom of the previous element, div3(in the **** standard stream)**.

At this point, congratulations to the reader for having mastered adding floats, but there are also clear floats, which are very easy to understand with the basics above.

As you can see from the above, elements are arranged vertically before they float, in standard flow, and horizontally after float.

Clearing the float can be understood as breaking the horizontal alignment.

The keyword for clearing a float is clear, which is officially defined as follows:

Grammar:

clear : none | left | right | both

Values:

None: the default value. Allow floating objects on both sides

Left: Floating objects are not allowed on the left

Right: Floating objects on the right are not allowed

Both: no floating objects are allowed

The definition is easy to understand, but readers may find it to be different when they actually use it.

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

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

Div1 and div2 both float. According to the rule, div2 will follow div1, but we still want div2 to float below div1, just as div1 does not float and div2 floats left.

To do this, use clear. If you were using the official definition, you might want to add clear:right to div1’s CSS style. Div1 is not allowed to have floating elements to the right of div1. Since div2 is a floating element, it automatically moves down one line to satisfy the rule.

Actually this kind of understanding is not correct, this does not have any effect. Judging by small dishes:

With CSSClear float ofKeep in mind that this rule affects only the element that uses the purge, not other elements.

How do you understand that? In the example above, we want div2 to move, but we use the clear float in the CSS style of the div1 element, trying to clear the float to the right of div1 (clear:right;). To force div2 to move down, this is not feasible because the cleanup float is called in div1 and it can only affect div1, not Div2.

The bottom line is that to move Div2 down, you must use floats in div2’s CSS styles. In this example, there is a floating element div1 to the left of div2, so just use clear:left in the CSS style for Div2; To specify that no floating elements are allowed to the left of the div2 element, forcing div2 to move down a row.

What if there are only two elements on the page, div1 and div2, and they float right? The reader should be able to guess the scenario for himself, as follows:

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

By the same token, if we want to move DIV2, we must call float in div2’s CSS style, because float can only affect the element that calls it.

We can see that div2 has a floating element div1 to the right, so we can use clear:right in the CSS style of Div2; To specify that no floating elements are allowed to the right of div2, forcing div2 to move down one line below div1.

At this point, the reader has mastered the basics of CSS+DIV floating positioning, enough to handle common layouts.

In fact, ten thousand changes from its zong, as long as the reader experience, no matter how complex the layout can be summed up through the law of small dishes.

What he wrote in the back:

It must be solemnly declared that CSS is extremely confusing, especially browser compatibility issues, the level of side dish is limited, this article is likely to be inappropriate, I hope readers forgive me.

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

In order to reduce the psychological pressure of readers, this article does not have any CSS, HTML code, because now many tutorials are a lot of CSS code, see the annoyance, let alone peruse.

Finally: In the process of learning the web front end, it is inevitable that you will encounter a lot of problems, which may trouble you for a long time. For this reason, I have a Web development learning exchange group (545667817), which is all the friends who dig gold. And organized a most comprehensive front-end learning materials,** from the most basic HTML+CSS+JS to mobile HTML5 project combat learning materials, want to learn can apply to join, we learn from each other, communicate with each other, common progress, share different learning materials every day!