Sinsing with you to completely solve the floating in CSS (bottom)

Above a blog, we explained how to use the CSS floating, this one we explain how to clear the CSS floating, in fact, the CSS floating clear is very simple, only need to use the clear property on it, as to how to use it, many people may be a cast fog, I also often find in beginners when the north, as if clear floating is a random event, of course, it is not, its regularity is very strong, let Sinsing to you to analyze this law.

The first is the HTML file above, and it reads as follows:

And then the following CSS file, let's just excerpt:
#demo1 {background-color: #933; height:100px;width:300px;} #demo2 {background-color: #0F0; height:60px;width:200px;} #demo3 {background-color: #F00; height:140px;width:250px;} #demo4 {background-color: #CCC; height:80px;width:180px;}
In fact, clear the float with clear, tightly grasp the definition can be: Clear value can be four, respectively, None,left,right and both. Everyone must note that it is clear floating, it clears the float, it clears the previous float, such as clear:none, this and not write the same, clear:left that if the previous one is a floating element, then it can not float on the left side of the element, That is, if my clear property is left, I definitely do not allow a floating element on my right, that is, I do not allow my previous one to float on my both, which means I do not allow my previous element to float on either side of me.
We can let block 2 right float, let block 3 clear float, but it does not float, Block 4 does not float, then the code is as follows:
#demo1 {background-color: #933; height:100px;width:300px;} #demo2 {float:right;background-color: #0F0; height:60px;width:200px;} #demo3 {clear:both;background-color: #F00; height:140px;width:250px;} #demo4 {background-color: #CCC; height:80px;width:180px;}
As follows:



That may be asked: Star brother, if the block three use Clear:left, is not next to block 1, the answer is this, we modify the CSS code as follows:
#demo1 {background-color: #933; height:100px;width:300px;} #demo2 {float:right;background-color: #0F0; height:60px;width:200px;} #demo3 {clear:left;background-color: #F00; height:140px;width:250px;} #demo4 {background-color: #CCC; height:80px;width:180px;}
The result diagram is as follows:


The above our block 3 does not use the float, it will be very easy to understand, then if the block three used the right float it? Look at the following code:
#demo1 {background-color: #933; height:100px;width:300px;} #demo2 {float:right;background-color: #0F0; height:60px;width:200px;} #demo3 {clear:both;float:right;background-color: #F00; height:140px;width:250px;} #demo4 {background-color: #CCC; height:80px;width:180px;}
The following is an explanation of the effect:

So at this point, you might think, what if my chunk siqing in addition to the right float?
At this point the CSS code becomes:
#demo1 {background-color: #933; height:100px;width:300px;} #demo2 {float:right;background-color: #0F0; height:60px;width:200px;} #demo3 {clear:both;float:right;background-color: #F00; height:140px;width:250px;} #demo4 {clear:both;background-color: #CCC; height:80px;width:180px;}
The effect is as follows:



Here, I want to talk about all finished, when I was a small rookie, but also confused, listen to vaguely, but, I read n many people's blog, listen to the explanation of n many people, finally understand. Of course, I'm sure, I read those blogs have the wrong explanation, but this article on the correctness of the absolute can be assured that ...