2 Days to harness div+css! Lesson Two

Source: Internet
Author: User
Tags xmlns
We should understand the role of float, is to eliminate the block element "hegemonism" a sharp weapon!

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!



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.