Sinsing with you to resolve CSS floats (next)

In the above blog post, we explain how to use the CSS float, which is a look at how we interpret clear CSS floats. In fact CSS floating is very clear easy, only need to use clear it property, as to how to use good it. A lot of people may vote fog, I was a novice when also often lost, clear float is a random event, of course. It is not, it is very strong regularity, let Sinsing to you to analyze this law.

First or the above HTML file, its contents such as the following:

Then the following CSS file, we still 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 to clear the float with clear, tightly grasp the definition can be: Clear value can be four, respectively, None,left,right and both.
It is important to note that it is clear floating, it clears the float, it clears the previous float, for example Clear:none. This is the same as not writing. Clear:left indicates that the previous one is a floating element, so it cannot float on the left side of the element, assuming that my clear property is Ieft. I absolutely disagree with a floating element on my left, with a value of right that I do not agree with my previous one floating on my both, that is, I disagree with my previous element floating on either side of me.
We can make chunk 2 float right, let block 3 clear floating, but it does not float itself. Block 4 also does not float, then the code such as the following:
#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;}
For example, the following:
watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvegluz3vpbwvuzw==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/southeast ">



That might have been asked: Star brother. Suppose block three uses clear:left. Will be next to block 1. The answer is this, we change the CSS code such as the following:
#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 resulting diagram is as follows:
watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvegluz3vpbwvuzw==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/southeast ">

Above our block 3 does not use the float, everybody understood will be very easy. So suppose that chunk three uses a right float? 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 at this point is as follows:



Here, all I have to say is finished. When I was a little rookie, it was confused. I heard a daze. But. I read n Many people's blog, listened to n many people's explanation, finally clear.
Of course. I'm sure I read the wrong commentary on those blogs, but this can be assured in absolute correctness ...


 
Copyright notice: This article blog original articles, blogs, without consent, may not be reproduced.
 
Sinsing with you to resolve CSS floats (next)