1.CSS布局常用的方法：
float : none | left | right 取值：
none : 默認值。對象不飄浮
left : 文本流向對象的右邊
right : 文本流向對象的左邊
它是怎樣工(gōng)作的，看個一(yī)行兩列的例子
xhtml:
<div id="warp">
<div id="column1">這裏是第一(yī)列</div>
<div id="column2">這裏是第二列</div>
<div class="clear"></div>/*這是違背web标準意圖的，隻是想說明在它下(xià)面的元素需要清除浮動*/
</div>
CSS:
#wrap{ width:100%; height:auto;}
#column1{ float:left; width:40%;}
#column2{ float:right; width:60%;}
.clear{ clear:both;}
position : static | absolute | fixed | relative取值：
static : 默認值。無特殊定位，對象遵循HTML定位規則
absolute : 将對象從文檔流中(zhōng)拖出，使用 left ， right ， top ， bottom 等屬性相對于其最接近的一(yī)個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據 body 對象。而其層疊通過 z-index 屬性定義
fixed : 未支持。對象定位遵從絕對(absolute)方式。但是要遵守一(yī)些規範
relative : 對象不可層疊，但将依據 left ， right ， top ， bottom 等屬性在正常文檔流中(zhōng)偏移位置
它來實現一(yī)行兩列的例子
xhtml:
<div id="warp">
<div id="column1">這裏是第一(yī)列</div>
<div id="column2">這裏是第二列</div>
</div>
CSS:
#wrap{ position:relative;/*相對定位*/width:770px;}
#column1{ position:absolute; top:0; left:0; width:300px;}
#column2{position:absolute; top:0; right:0; width:470px;}
他們的區别在哪?
顯然，float是相對定位的，會随着浏覽器的大(dà)小(xiǎo)和分(fēn)辨率的變化而改變，而position就不行了，所以一(yī)般情況下(xià)還是float布局！
2.CSS常用布局實例
一(yī)列
單行一(yī)列
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; }
兩行一(yī)列
body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; }
#content-end {margin-left:auto; margin-right:auto; width: 400px; }
三行一(yī)列
body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; }
兩列
單行兩列
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 420px;}
兩行兩列
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 420px;}
三行兩列
#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 420px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; clear:both; }
三列
單行三列
絕對定位
#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 0px 190px 0px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}
float定位
xhtml:
<div id="warp">
<div id="column">
<div id="column1">這裏是第一(yī)列</div>
<div id="column2">這裏是第二列</div>
<div class="clear"></div>/*用法web标準不建議，但是記住下(xià)面元素需要清除浮動*/
</div>
<div id="column3">這裏是第三列</div>
<div class="clear"></div>/*用法web标準不建議，但是記住下(xià)面元素需要清除浮動*/
</div>
CSS:
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
float定位二
xhtml
<div id="center" class="column">
<h1>This is the main content.</h1>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
</div>
CSS
body {
margin: 0;
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
min-width: 200px; /* LC fullwidth + CC padding */
}
.column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC fullwidth */
margin-left: -100%;
}
#right {
width: 190px; /* RC width */
margin-right: -100%;
}
/*** IE Fix ***/
* html #left {
left: 190px; /* RC fullwidth */
}
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd兩行三列
xhtml: ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Holy Grail of Layouts: Example #4: A List Apart</title>
<style type="text/css">
/*** The Essential Code ***/
body {
margin: 0;
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
min-width: 200px; /* LC fullwidth + CC padding */
}
#header, #footer {
margin-left: -200px; /* LC fullwidth */
margin-right: -190px; /* RC fullwidth + CC padding */
}
.column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC fullwidth */
margin-left: -100%;
}
#right {
width: 190px; /* RC width */
margin-right: -100%;
}
#footer {
clear: both;
}
/*** IE Fix ***/
* html #left {
left: 190px; /* RC fullwidth */
}
/*** Just for Looks ***/
body {
background: #FFF;
}
#header, #footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background: #999;
}
#left {
background: #66F;
}
#center {
background: #DDD;
}
#right {
background: #F66;
}
.column {
padding-top: 1em;
text-align: justify;
}
</style>
</head>
<body>
<div id="header">This is the header.</div>
<div id="center" class="column">
<h1>This is the main content.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id="footer">This is the footer.</div>
</body>
</html>
[/html]
<div id="header">這裏是頂行</div>
<div id="warp">
<div id="column">
<div id="column1">這裏是第一(yī)列</div>
<div id="column2">這裏是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">這裏是第三列</div>
<div class="clear"></div>
</div>
CSS:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
三行三列
xhtml:
<div id="header">這裏是頂行</div>
<div id="warp">
<div id="column">
<div id="column1">這裏是第一(yī)列</div>
<div id="column2">這裏是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">這裏是第三列</div>
<div class="clear"></div>
</div>
<div id="footer">這裏是底部一(yī)行</div>
CSS:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}
PS:這裏列出的是常用的例子，而非研究之用，對一(yī)每個盒子，我(wǒ)(wǒ)都沒有設置margin,padding,boeder等屬性，是因爲我(wǒ)(wǒ)個人覺得，含有寬度定位的時候，最好不好用到他們，除非必不得已，因爲如果不是這樣的話(huà)，解決浏覽器兼容問題，會讓你頭疼，而且産生(shēng)一(yī)系列CSS代碼，我(wǒ)(wǒ)覺得這樣的效率和效果都不好！
3.CSS布局高級技巧
margin和padding總是有可能要用到，而産生(shēng)的問題如何解決呢？由于浏覽器解釋容器寬度的方法不同：
IE 6.0 Firefox Opera等是
真實寬度=width+padding+border+margin
IE5.X
真實寬度=width-padding-border-margin
IE中(zhōng)有浮動對象的雙倍距離(lí)之BUG（IE Doubled Float-Margin Bug ）, 這裏還需要具體(tǐ)問題具體(tǐ)解決，下(xià)面是解決辦法
http://www.forest53.com/tutorials/tutorials_show.asp?id=31很明顯，第一(yī)種下(xià)很完美的布局在第二種情況下(xià)後果是很凄慘的！
解決的方法是hack
div.content {
width:400px; //這個是錯誤的width，所有浏覽器都讀到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""後的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分(fēn)浏覽器讀到這句，新的數值(300px)覆蓋掉了舊(jiù)的
}
html>body .content { //html>body是CSS2的寫法
width:300px; //支持CSS2該寫法的浏覽器(非IE5)有幸讀到了這一(yī)句
}
div.content {
width:300px !important; //這個是正确的width，大(dà)部分(fēn)支持!important标記的浏覽器使用這裏的數值
width(空格)/**/:400px; //IE6/win不解析這句，所以IE6/win仍然認爲width的值是300px；而IE5.X/win讀到這句，新的數值(400px)覆蓋掉了舊(jiù)的，因爲!important标記對他們不起作用
}
html>body .content { //html>body是CSS2的寫法
width:300px; //支持CSS2該寫法的浏覽器有幸讀到了這一(yī)句
}
具體(tǐ)解釋點擊下(xià)面鏈接查看
http://www.blueidea.com/tech/site/2006/3170.asp列等高技巧
n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每個設計師追求的目标，做法有：背景圖填充、加JS腳本的
方法和容器溢出部分(fēn)隐藏和列的負底邊界和正的内補丁相結合的方法。
背景圖填充法：
xhtml:
http://www.jluvip.com/blog/article.asp?id=114
<div id="wrap">
<div id="column1">這是第一(yī)列</div>
<div id="column1">這是第二列</div>
<div class="clear"></div>
</div>
css:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}
就是将一(yī)個npx寬的一(yī)張圖片在外(wài)部容器縱向重複，定位到兩列交錯的位置縱向重複，在視覺上産生(shēng)了兩列高度一(yī)樣的錯覺
JS腳本法：
http://www.blueidea.com/bbs/NewsDetail.asp?id=2453983代碼的原理基本就是這樣，讀取高度，判斷高度，高度相等
容器溢出部分(fēn)隐藏和列的負底邊界和正的内補丁相結合的方法
這篇文章說的很詳細了
http://www.blueidea.com/tech/web/2006/3210.asp
float : none | left | right 取值：
none : 默認值。對象不飄浮
left : 文本流向對象的右邊
right : 文本流向對象的左邊
它是怎樣工(gōng)作的，看個一(yī)行兩列的例子
xhtml:
<div id="warp">
<div id="column1">這裏是第一(yī)列</div>
<div id="column2">這裏是第二列</div>
<div class="clear"></div>/*這是違背web标準意圖的，隻是想說明在它下(xià)面的元素需要清除浮動*/
</div>
CSS:
#wrap{ width:100%; height:auto;}
#column1{ float:left; width:40%;}
#column2{ float:right; width:60%;}
.clear{ clear:both;}
position : static | absolute | fixed | relative取值：
static : 默認值。無特殊定位，對象遵循HTML定位規則
absolute : 将對象從文檔流中(zhōng)拖出，使用 left ， right ， top ， bottom 等屬性相對于其最接近的一(yī)個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據 body 對象。而其層疊通過 z-index 屬性定義
fixed : 未支持。對象定位遵從絕對(absolute)方式。但是要遵守一(yī)些規範
relative : 對象不可層疊，但将依據 left ， right ， top ， bottom 等屬性在正常文檔流中(zhōng)偏移位置
它來實現一(yī)行兩列的例子
xhtml:
<div id="warp">
<div id="column1">這裏是第一(yī)列</div>
<div id="column2">這裏是第二列</div>
</div>
CSS:
#wrap{ position:relative;/*相對定位*/width:770px;}
#column1{ position:absolute; top:0; left:0; width:300px;}
#column2{position:absolute; top:0; right:0; width:470px;}
他們的區别在哪?
顯然，float是相對定位的，會随着浏覽器的大(dà)小(xiǎo)和分(fēn)辨率的變化而改變，而position就不行了，所以一(yī)般情況下(xià)還是float布局！
2.CSS常用布局實例
一(yī)列
單行一(yī)列
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; }
兩行一(yī)列
body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; }
#content-end {margin-left:auto; margin-right:auto; width: 400px; }
三行一(yī)列
body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; }
兩列
單行兩列
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 420px;}
兩行兩列
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 420px;}
三行兩列
#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 420px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; clear:both; }
三列
單行三列
絕對定位
#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 0px 190px 0px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}
float定位
xhtml:
<div id="warp">
<div id="column">
<div id="column1">這裏是第一(yī)列</div>
<div id="column2">這裏是第二列</div>
<div class="clear"></div>/*用法web标準不建議，但是記住下(xià)面元素需要清除浮動*/
</div>
<div id="column3">這裏是第三列</div>
<div class="clear"></div>/*用法web标準不建議，但是記住下(xià)面元素需要清除浮動*/
</div>
CSS:
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
float定位二
xhtml
<div id="center" class="column">
<h1>This is the main content.</h1>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
</div>
CSS
body {
margin: 0;
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
min-width: 200px; /* LC fullwidth + CC padding */
}
.column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC fullwidth */
margin-left: -100%;
}
#right {
width: 190px; /* RC width */
margin-right: -100%;
}
/*** IE Fix ***/
* html #left {
left: 190px; /* RC fullwidth */
}
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd兩行三列
xhtml: ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Holy Grail of Layouts: Example #4: A List Apart</title>
<style type="text/css">
/*** The Essential Code ***/
body {
margin: 0;
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
min-width: 200px; /* LC fullwidth + CC padding */
}
#header, #footer {
margin-left: -200px; /* LC fullwidth */
margin-right: -190px; /* RC fullwidth + CC padding */
}
.column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC fullwidth */
margin-left: -100%;
}
#right {
width: 190px; /* RC width */
margin-right: -100%;
}
#footer {
clear: both;
}
/*** IE Fix ***/
* html #left {
left: 190px; /* RC fullwidth */
}
/*** Just for Looks ***/
body {
background: #FFF;
}
#header, #footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background: #999;
}
#left {
background: #66F;
}
#center {
background: #DDD;
}
#right {
background: #F66;
}
.column {
padding-top: 1em;
text-align: justify;
}
</style>
</head>
<body>
<div id="header">This is the header.</div>
<div id="center" class="column">
<h1>This is the main content.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id="footer">This is the footer.</div>
</body>
</html>
[/html]
<div id="header">這裏是頂行</div>
<div id="warp">
<div id="column">
<div id="column1">這裏是第一(yī)列</div>
<div id="column2">這裏是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">這裏是第三列</div>
<div class="clear"></div>
</div>
CSS:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
三行三列
xhtml:
<div id="header">這裏是頂行</div>
<div id="warp">
<div id="column">
<div id="column1">這裏是第一(yī)列</div>
<div id="column2">這裏是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">這裏是第三列</div>
<div class="clear"></div>
</div>
<div id="footer">這裏是底部一(yī)行</div>
CSS:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}
PS:這裏列出的是常用的例子，而非研究之用，對一(yī)每個盒子，我(wǒ)(wǒ)都沒有設置margin,padding,boeder等屬性，是因爲我(wǒ)(wǒ)個人覺得，含有寬度定位的時候，最好不好用到他們，除非必不得已，因爲如果不是這樣的話(huà)，解決浏覽器兼容問題，會讓你頭疼，而且産生(shēng)一(yī)系列CSS代碼，我(wǒ)(wǒ)覺得這樣的效率和效果都不好！
3.CSS布局高級技巧
margin和padding總是有可能要用到，而産生(shēng)的問題如何解決呢？由于浏覽器解釋容器寬度的方法不同：
IE 6.0 Firefox Opera等是
真實寬度=width+padding+border+margin
IE5.X
真實寬度=width-padding-border-margin
IE中(zhōng)有浮動對象的雙倍距離(lí)之BUG（IE Doubled Float-Margin Bug ）, 這裏還需要具體(tǐ)問題具體(tǐ)解決，下(xià)面是解決辦法
http://www.forest53.com/tutorials/tutorials_show.asp?id=31很明顯，第一(yī)種下(xià)很完美的布局在第二種情況下(xià)後果是很凄慘的！
解決的方法是hack
div.content {
width:400px; //這個是錯誤的width，所有浏覽器都讀到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""後的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分(fēn)浏覽器讀到這句，新的數值(300px)覆蓋掉了舊(jiù)的
}
html>body .content { //html>body是CSS2的寫法
width:300px; //支持CSS2該寫法的浏覽器(非IE5)有幸讀到了這一(yī)句
}
div.content {
width:300px !important; //這個是正确的width，大(dà)部分(fēn)支持!important标記的浏覽器使用這裏的數值
width(空格)/**/:400px; //IE6/win不解析這句，所以IE6/win仍然認爲width的值是300px；而IE5.X/win讀到這句，新的數值(400px)覆蓋掉了舊(jiù)的，因爲!important标記對他們不起作用
}
html>body .content { //html>body是CSS2的寫法
width:300px; //支持CSS2該寫法的浏覽器有幸讀到了這一(yī)句
}
具體(tǐ)解釋點擊下(xià)面鏈接查看
http://www.blueidea.com/tech/site/2006/3170.asp列等高技巧
n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每個設計師追求的目标，做法有：背景圖填充、加JS腳本的
方法和容器溢出部分(fēn)隐藏和列的負底邊界和正的内補丁相結合的方法。
背景圖填充法：
xhtml:
http://www.jluvip.com/blog/article.asp?id=114
<div id="wrap">
<div id="column1">這是第一(yī)列</div>
<div id="column1">這是第二列</div>
<div class="clear"></div>
</div>
css:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}
就是将一(yī)個npx寬的一(yī)張圖片在外(wài)部容器縱向重複，定位到兩列交錯的位置縱向重複，在視覺上産生(shēng)了兩列高度一(yī)樣的錯覺
JS腳本法：
http://www.blueidea.com/bbs/NewsDetail.asp?id=2453983代碼的原理基本就是這樣，讀取高度，判斷高度，高度相等
容器溢出部分(fēn)隐藏和列的負底邊界和正的内補丁相結合的方法
這篇文章說的很詳細了
http://www.blueidea.com/tech/web/2006/3210.asp
475003427