There are two ways of page layout
1) Float float
2) Positioning position
Let's have a little practice today to understand the meaning of float.
Example
Requirements:
1) Two squares, a red #900, a blue #009;
2 Red Square width and height are 200 pixels, blue squares
The width is 300 pixels and the height is 200 pixels;
3 The upper outer margin (margin-top) and left outer margin (margin-left) of Red Square blue are 20 pixels;
The page effect is as follows:
The source code is 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> Example 2</title>
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>
<body>
<div id= "Redblock" ></div>
<div id= "Blueblock" ></div>
</body>
/* CSS Document * *
body,div{padding:0; margin:0;}
#redBlock {
width:200px;
height:200px;
Background: #900;
margin-top:20px;
margin-left:20px;
}
#blueBlock {
width:300px;
height:200px;
Background: #009;
margin-top:20px;
margin-left:20px;
}
It should be noted that although the width of the Red Square is not 100%, but the blue is not the same line as red, this is a block element more "overbearing" point, (even if the width of a block element is not 100%, it does not allow other elements to be in line with himTo eliminate this "hegemony", keep the red and blue squares in one line, as shown in the figure:
It's time to take out our sharp weapon float! Only need to add "Float:left" in the CSS of the Red Square, this time in the IE6 can see the Blue Square really ran to the back of the Red Square, and in a row, but in Firefox has become the following effect:
It is time to note that if the front area of FF floats, the area behind it is likely to overlap and dislocation with the previous area.
How can solve this problem, solve this browser compatibility problem, very easy, just want to be in the Blue Square CSS code also joins "Float:left;", the problem solves, plus try, see in FF Blue Square is to be in line with Red Square
Here, we should understand the role of float, is to eliminate the massive elements of "hegemonism" a sharp weapon! In the layout of the page sometimes it is necessary to eliminate the block element hegemonism to layout well yo.
Careful students will notice that in IE6 the Red Square is not the left margin of the browser is defined in the CSS code 20 pixels, but 40 pixels, the following figure:
In fact, this is a bug in IE6, (IE6 double margin bug), this bug can only occur if the following 3 conditions are met:
1) to be a block element;
2) to the left floating;
3) to have left outer margin (margin-left);
It's easy to fix this bug by simply adding "Display:inline" to the CSS tree of the corresponding block element, and the code is as follows:
#redBlock {
width:200px;
height:200px;
Background: #900;
margin-top:20px;
margin-left:20px;
Float:left;
Display:inline;
}
Now look again, is not IE6 and FF show the same ~
Oh, this class is also easier, if you do not understand can leave a message, I will do a further explanation.
For the next lesson, let's talk about the "floating clear" question!
The final code is 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> Example 2</title>
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>
<body>
<div id= "Redblock" ></div>
<div id= "Blueblock" ></div>
</body>
/* CSS Document * *
body,div{padding:0; margin:0;}
#redBlock {
width:200px;
height:200px;
Background: #900;
margin-top:20px;
margin-left:20px;
Float:left;
Display:inline;
}
#blueBlock {
width:300px;
height:200px;
Background: #009;
margin-top:20px;
margin-left:20px;
Float:left;
}
This article comes from www.cssxuexi.cn* respect others Labor achievement, 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
