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

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

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

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

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

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

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

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

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

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

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

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

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