Remember the effect of the example we did in Lesson two? The final effect is that the red squares and the blue squares are all on one line, and we use "float:left" to crack down on the "overbearing" block elements that block elements do not allow other elements to be on the same line. We added the CSS code of the Red Square to the "float:left;" After the Red Square finally allows the blue box to be in the same row as it. As shown in figure:
We change the meaning of the above, because the Red Square "left floating", which causes the blue square to move to the end of the Red Square;
In the last example, in order to achieve browser compatibility, we separately in the red Blue Square CSS code added "Float:left", so IE and FF display effect, if we also want to put a width of 400 pixels, height of 100 green square, and let it in the second row, The effect of the following figure:
But no matter how to put it, in IE the effect is always
Cause the green to get to the back of the blue this situation is because the blue square CSS code contains "Float:left", but for browser compatibility, can not be removed (what?) This sentence can not understand, only to explain that the second class you do not learn, good taste! ), what to do?
Good to do ~! Just add the following code to the CSS code:
. Clear{clear:both;}
and add the following code to the HTML code:
<div class= "Clear" ></div>
The above sentence is added in that position, to add in the middle of the blue and green squares, and then see the effect is not what we want ~ ^_^
<div id= "Redblock" > Blog's left </div>
<div id= "Blueblock" > Blog Right </div>
<div class= "clear" ></div>
Copyright information of <div id= "Greenblock" > Blog </div>
The goal is to clear the blue square of the floating on the green square below the impact! is the impact of yo ~ is to clear the impact, rather than clear the floating of blue squares, or to remove the blue box floating on the following areas of the effect of the block! (Careful product I said this sentence!) )
If you still do not understand, you will be in the Red Square and the middle of the blue box "<div class=" clear "></div>", to see what the effect becomes, and then the product I just said!
This class is here, the next class we make a navigation bar, very practical yo! Be sure to thoroughly understand the previous sections, or the fourth section will not be able to catch up!
The third lesson is full code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Right Floating float:left-css learning Interactive Community </title>
<style type= "Text/css" >
<!--
#redBlock, #greenBlock, #blueBlock {
width:200px;
height:200px;
Color: #FFF;
}
#redBlock {
Background: #900;
Float:left;
}
#blueBlock {
Background: #009;
Float:left;
}
#greenBlock {
width:400px;
height:100px;
Background: #090;
}
. Clear{clear:both;}
-->
</style>
<body>
<div id= "Redblock" > Blog's left </div>
<div id= "Blueblock" > Blog Right </div>
<div class= "Clear" ></div>
Copyright information of <div id= "Greenblock" > Blog </div>
</body>
This article comes from www.cssxuexi.cn * Respect others Labor achievements, reprint please consciously indicate the source!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
