This is one of the best articles I’ve ever written about CSS float, and it really hit home.
The author has written very well and has been around CSS for a long time, but is still confused about floating, either because of his poor understanding of it or because he failed to come across 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:
If A div element A is floating, and an element above it is also floating, the element A follows the previous one (if the two elements do not fit in A row, the element A is pushed to the next row). If the element above the element is an element in the standard flow, the relative vertical position of A does not change, meaning that the top of A is always aligned with the bottom of the previous element.
The order of divs is determined by the order of the div in the HTML code.
The end near the edge of the page is front, and the end away from the edge of the page is back.
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 this is always true, because as you can see from the diagram, 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:
When it comes to CSS clear, it’s important to remember that this rule only affects the element being cleared, 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.
From http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html
[author blog] (www.cnblogs.com/iyangyuan/a.)