摘要：經(jīng)常在網(wǎng)站上看到，左邊是目錄，右邊放一些備注啊，廣告之類的。后記記錄這里的第一篇文章，花了一個(gè)下午寫(xiě)出來(lái)的。

這是一種比較常見(jiàn)的網(wǎng)站布局，此布局為兩邊等寬，中間自適應(yīng)的三欄布局。經(jīng)常在網(wǎng)站上看到，左邊是目錄，右邊放一些備注啊，廣告之類的。

這里主要涉及到float,margin,定位；

浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素;

假如在一行之上只有極少的空間可供浮動(dòng)元素，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過(guò)程會(huì)持續(xù)到某一行擁有足夠的空間為止。（如圖：兩個(gè)inner浮動(dòng)后一行排列不下，就會(huì)自動(dòng)換行）

浮動(dòng)元素不能把未定義寬高的父元素?fù)伍_(kāi)，需要做一步清除浮動(dòng)的操作

清除浮動(dòng) 增加一個(gè)標(biāo)簽，css屬性設(shè)置 clear: both; 或者父元素 overflow: hidden;

margin-left: 是元素左邊框距離父元素左邊框的距離

這個(gè)正常設(shè)置10px等這些具體的值都好理解，但是也可以設(shè)置百分比，百分比是相對(duì)于父級(jí)元素的比例，如下: 父元素灰色的 (200*200)，子元素粉色(100*100)；

當(dāng)值為負(fù)的時(shí)候，是距離父元素左邊框往左的距離；

margin-left: -100%;是往左偏移父元素寬

這里主要了解相對(duì)定位（relative）：相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。

先上代碼，然后預(yù)覽一下效果；