Css-float detailed introduction of the Clear:both

The first thing to know is that P is a block-level element that has a single line in the page, arranged from top to bottom, which is the legendary stream.

As can be seen, even if the width of the P1 is very small, the page can tolerate P1 and p2,p2 will not be ranked behind the P1, because the P element is block-level, exclusive line. Note that these theories refer to p in the standard flow.
No matter how complex the layout, the basic starting point is: "How to display multiple p elements on one line." Float can be understood as letting a P element out of the standard flow, floating above the standard stream, and not a hierarchy of standard flows, so it is called float.
For example, if the P2 floating, then it will be out of the standard flow, but P1, P3, P4 is still in the standard flow, so P3 will automatically move upward, occupy P2 position, re-form a stream.

As can be seen, because of the P2 set floating, so it no longer belongs to the standard flow, P3 automatically up the displacement P2 position, p1, P3, P4 in order to become a new stream. And because the float is floating on the standard flow, so the P2 block a part of the P3,P3 looks "short"
The P2 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 P2 to float right, it will be as follows:

At this time P2 by the right edge of the page arrangement, no longer obscure P3, the reader can clearly see the above-mentioned P1, P3, p4 composition of the flow.
So far we've only floated one P element, many more?
Let's add the P2 and P3 to the left floating, the effect

Similarly, because P2, p3 float, they no longer belong to the standard flow, so P4 will automatically move up, and P1 form a "new" standard flow, and the float is floating on the standard flow, so P2 block P4.
Cough, to the point, when the P2, P3 set floating, P3 will follow P2, do not know if the reader has found, until now, p2 in each case is floating, but did not follow the P1. Therefore, we can draw an important conclusion:
If a P element A is floating, if the previous element of a element is also floating, then a element will follow the right side of the previous element (if one row cannot fit the two elements, 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. Simply put, 2 float:left will be arranged horizontally, if the first is the standard flow, the second is Float:left, then the second one will be ranked the bottom of the first one.
The order of P is determined by the order of P in the HTML code.
Near the edge of the page is the front, away from the edge of the page after the end.
To help the reader understand, give a few more examples.
If we set P2, P3, P4 to the left float, the effect is as follows:

According to the above conclusion: starting from P4 analysis, it found that the upper element P3 is floating, so P4 will follow P3, P3 found that the upper element p2 is also floating, so P3 will follow the P2, and P2 found that the upper element P1 is the element in the standard flow, so the relative vertical position of P2 is unchanged, The top is still aligned with the bottom of the P1 element. Because it is left floating, the left side is near the edge of the page, so the left side is front, so P2 is on the left.
If the P2, P3, P4 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 P2 on the far right.

If we float the P2 and the P4 to the left, the following:

Still according to the conclusion, P2, P4 floating, out of the standard flow, so P3 will automatically move up, and P1 constitute a standard flow. P2 found that the previous element P1 is an element in the standard flow, so the P2 is not changed relative to the vertical position, aligned with the bottom of the P1. P4 found that the previous element P3 is an element in the standard flow, so the top of the P4 is aligned with the bottom of the P3, and is always true, as it can be seen that P3 moves up after the P4, and P4 always guarantees the bottom alignment of its top and previous element P3 (elements in the standard flow).

At this point, congratulations to the reader has mastered the addition of floating, but there are clear floating, there is a basic clear floating on the top is very easy to understand.

Through the study above, it can be seen that: before the element floats, that is, in the standard flow, is vertical arrangement, and floating can be understood as a horizontal arrangement.
Clear float can be understood as breaking the horizontal arrangement.
The clear floating keyword is clear and the official definition is as follows:
Grammar:

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

The definition is very easy to understand, but the reader may find that this is not the case when actually using it.
There is nothing wrong with the definition, but it is too vague to describe, which makes us overwhelmed.
According to the above basis, if there are only two elements in the page P1, p2, they are left floating, the scene is as follows:

At this time P1, p2 are floating, according to the rules, P2 will follow the P1 behind, but we still hope that P2 can be arranged under the P1, like P1 no float, p2 left floating.

This is the time to clear the float (clear), if only according to the official definition, the reader may try to write: in the P1 CSS style to add clear:right,, understood to not allow the P1 to the right of the floating element, because P2 is a floating element, it will automatically move down one line to satisfy the rule.

In fact, this understanding is not correct, this does not have any effect.

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.

How do you understand it? Take the above example, we want to let P2 move, but we are using the P1 element of the CSS style to clear the float, trying to remove P1 to the right of the floating element (clear:right;) to force the P2 down, this is not feasible, because this clear float is called in the P1, It can only affect P1, can not affect P2.

For P2 to move down, you must use the float in the P2 CSS style. In this example, the left side of P2 has a floating element P1, so as long as the clear:left is used in the P2 CSS style, to specify that the P2 element is not allowed floating elements to the left, so P2 is forced to move down one line.

So if there are only two elements in the page P1, p2, are they all floating right? Readers should now be able to speculate on their own scenarios, as follows:

Now, if you want to move P2 down to P1, how do you do it?

We want to move the P2, we must call the float in the P2 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 P2 P1, then we can use Clear:right in the P2 CSS style, to specify that the right side of P2 does not allow floating elements, so P2 is forced to move down one line to the bottom of P1.

Behind to extend:
If you don't add the Clear:both effect is this:

The gray background color is not added to the second line because the second row is float, and the. Ob-body is not on one level, the second line floats on. Ob-body, using pseudo-classes: After is to get the second line back to the ground

The 
 Adds Clear:both effect: 
 
 Finally parse: Why add Clearfix is OK. Two kinds of writing is actually a meaning, is in the. Ob-body to add an empty  <p>  (as long as the block, because only the block, can be horizontally filled), this  <p>  is actually an invisible thin strip, Because he is at the bottom of the. Ob-body, and is not a float, is bound to be. Ob-body's background color control, his presence defines. The height of the ob-body, so the height range will be affected by the gray background color, although the second line is still floating in the sky, but the ground has been paved with silver. And the bottom of the  <p>  must have clear:both, otherwise if it is just the standard flow, it will stick to the bottom of the first line, of course, can not cover the second line, in fact, this example uses clear: Left also works (because the second row is Float:left), but for versatility, use the both bar. And also verified: This rule can only affect the use of cleared elements themselves, can not affect other elements, clear the hidden p both.