1.一列布局（又叫單列布局）
一列布局需要掌握3個知識點：標準文件流，其中又包含了塊級元素和行級元素，還有margin屬性，可以說實現一列布局的關鍵**就是由margin屬性實現的，通過設定margin:0 auto;來實現水平居中，auto就是它會根據瀏覽器的寬度自動設定兩邊的外邊距。要設定margin，你首先得有乙個盒子模型，比如這裡的div，然後設定它的長寬，有乙個固定的大小，才可以實現居中。
this is head !
this is main !
this is footer !
浮動：塊級元素都是一行一行這樣排列的，需要把兩個塊級元素併排時，就需要用到css中的浮動布局float，float有三個屬性值，
left-左浮動，right-右浮動，none-不浮動，一旦設定了float屬性，元素就會對應的向左移，或向右移，直到碰到容器邊緣，
當元素沒有內容但是設定了浮動屬性時，元素的寬度就隨內容的變化而變化。
清除浮動的常用方法是：clear：both；（為需要清楚浮動的元素設定）如果你清楚的知道設定了那種浮動，也可以clear：right/left，一般都用both，保障浮動被清除；還有另外一種清除浮動的方法，width:100%;overflow:hidden;
this is left !
this is right !
3.三列布局
position可設定4個屬性值，分別為：static（靜態定位），relative（相對定位），absolute（絕對定位），fixed（固定定位）
三列布局自適應，將上述兩列布局中的比例更改為33.33%即可，那麼以此類推，四列布局自適應也可以用一樣的方法，調整比例分配，從而實現自己想要的布局方式。
this is left !
this is middle !
this is right !
注意left:0;top:0；right:0;top:0;這些設定是必須的，不加就會出問題，親測
this is left !
this is middle !
this is right !
html 三列布局（兩列自適應，一列固定寬度）
原文 html 三列布局 兩列自適應，一列固定寬度 不做過多解釋 主要是記錄乙個完整的布局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。不多少 奉上 公共標籤樣式 main 外邊框自適應區域 main title 標題 main title 頭部文號區 70px content ...
html 三列布局（兩列自適應，一列固定寬度）
不做過多解釋 主要是記錄乙個完整的布局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。不多少 奉上 公共標籤樣式 main 外邊框自適應區域 main title 標題 main title 頭部文號區 70px content title 區域塊設定 area area left...
CSS 多列布局 三列布局
下面的 演示了3列布局的用法。html head title 三列布局 styletype text css body column1of3,column2of3,column3of3 body h1style color 706fd3 軟體開發，成就夢想 h2 ahref 學程式設計，上利永貞網 ...