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

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

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

浮動元素會生成一個塊級框，而不論它本身是何種元素;

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

浮動元素不能把未定義寬高的父元素撐開，需要做一步清除浮動的操作

清除浮動 增加一個標簽，css屬性設置 clear: both; 或者父元素 overflow: hidden;

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

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

當值為負的時候，是距離父元素左邊框往左的距離；

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

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

先上代碼，然后預覽一下效果；