CSS Floating troubles explained ~

The following is a DIV element layout as an example of Oh, ah beaver here for everyone to explain, there is no place, please leave a message to correct!
What about DIV? is a block-level element that has a single line in the page, arranged from top to bottom, which is the legendary stream.


As you can see, even if the width of the div1 is very small, the line in the page can tolerate Div1 and div2,div2 and will not be ranked behind Div1, because the DIV element is exclusive.
If you want a row to display multiple div elements, you can use floats.
Floating can be understood as leaving a DIV element out of the standard flow, floating above the standard stream, and not a hierarchy of standard flows.
For example, assuming that the div2 floats, then it will be out of the standard flow, but Div1, Div3, Div4 are still in the standard flow, so Div3 will automatically move up, occupy the div2 position, and re-form a stream.
As can be seen, because of the div2 set floating, so it no longer belongs to the standard flow, Div3 automatically up the displacement div2 position, Div1, Div3, div4 in order to become a new stream. And because the float is floating on the standard flow, so div2 block a part of the div3,div3 appears to be "short".
The div2 here is left-floating (float:left;), which can be understood as floating up, left-aligned, right-floating (float:right;) and, of course, on the right. Left and right are the left and right edges of the page.
If we use the div2 to float right, it will be as follows:

At this time div2 by the right edge of the page arrangement, no longer obscure div3, the reader can clearly see the above-mentioned Div1, Div3, div4 composition of the flow.
So far we've only floated one div element, how many?
Let's add the Div2 and Div3 to the left floating, the effect

Because Div2, Div3 float, they no longer belong to the standard flow, so div4 will automatically move up, and Div1 form a "new" standard flow, and the float is floating on the standard flow, so div2 block div4.
Cough, to the point, when the Div2, Div3 set floating, Div3 will follow Div2, do not know if the reader has found, until now, div2 in each case is floating, but did not follow the DIV1. Therefore, we can draw an important conclusion:
If a DIV element A is floating, if the previous element of a element is also floating, then a element will follow the previous element (if the two elements are not placed in a row, the a element will be squeezed to the next line), and if the previous element of a element is an element in the standard flow, the relative vertical position of a will not change. This means that the top of a is always aligned with the bottom of the previous element.
The order of the div is determined by the order of the div in the HTML code.
Near the edge of the page is the front, away from the edge of the page after the end.
Ah, the beaver to help everyone better understand, to raise some chestnuts ~
If we put Div2, Div3, Div4 are set to the left floating, the effect is as follows:

According to the above conclusion, then AH-raccoon try to understand again: first from DIV4 analysis, it found that the above element div3 is floating, so div4 will follow Div3, Div3 found that the upper element div2 is also floating, so Div3 will follow the Div2 While Div2 found that the upper element div1 is an element in the standard flow, the relative vertical position of the div2 is unchanged, and 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 front, so Div2 is on the left.
If the Div2, Div3, Div4 are set to the right floating, the effect is as follows:
The truth and left floating basically the same, just need to pay attention to the corresponding relationship. Because it is floating right, so the right side is near the edge of the page, so the right side is front, so div2 on the far right.
If we float the div2 and the div4 to the left, the following:
Still according to the conclusion, Div2, Div4 floating, out of the standard flow, so Div3 will automatically move up, and div1 constitute a standard flow. Div2 found that the previous element div1 is an element in the standard flow, so the div2 is not changed relative to the vertical position, aligned with the bottom of the div1. Div4 found that the previous element div3 is the element in the standard flow, so the top of the DIV4 is aligned with the bottom of the div3, and is always true, as it can be seen that div3 moves up after the div4, Div4 always guarantees its top and last element Div3 (elements in the standard flow) The bottom of the alignment.

Here you have mastered the addition of floating oh ~
Next is to clear the float, with the above content, here is better understand ~
What is clear float?
Clear float can be understood as breaking the horizontal arrangement. The clear floating keyword is clear and the syntax is as follows:
Clear:none | Left | Right | Both
Value:
None: Default value. Allowed to have floating objects on both sides
Left: does not allow floating objects
Right: Do not allow floating objects
Both: Floating objects are not allowed
If the figure below has only two elements div1, DIV2, they are all left floating, the scene is as follows:
At this time div1, div2 are floating, according to the rules, DIV2 will follow the div1 behind, but we still hope that div2 can be arranged under the div1, like Div1 no float, div2 left floating.
It is necessary to use the clear float
For CSS Clear floating (clear), be sure to keep in mind that this rule only affects the elements that use the purge itself, and cannot affect other elements. So
For Div2 to move down, you must use the float in the div2 CSS style. In this example, the left side of Div2 has floating element div1, so as long as the clear:left is used in the Div2 CSS style, to specify that no floating element is allowed on the left side of the div2 element, so Div2 is forced to move down one line
So if there are only two elements in the page DIV1, Div2, are they all floating right? You should now be able to speculate on the scene yourself, as follows:
Now, if you want to move div2 down to Div1, how do you do it?
We want to move the DIV2, we must call the float in the div2 CSS style, because the float only affects the element that invokes it.
You can see that there is a floating element on the right side of the Div2 Div1, then we can use Clear:right in the Div2 CSS style, to specify that the right side of DIV2 does not allow floating elements, so div2 is forced to move down one line to the bottom of div1.
Follow Ah, beaver, small pot friends have mastered the basic principle of css+div floating positioning, enough to cope with common layout.
If you find more and better later. Ah, the beaver again to share with you ~
Everyone can leave a message to Ali Oh ~

CSS Floating troubles explained ~