常見的布局方式: float布局、Position定位、table布局、彈性(flex)布局、網格(grid)布局
那么我們就是用以上5種方式完成三欄布局，不過前提是左右寬度(假如左右寬度為300px),整個高度已知(假如高度為100px)，中間寬度自適應
1、float布局:
float最初的設計的初衷是為了解決文字環繞的問題 ，即給一個圖片設置float屬性之后會使文字環繞在圖片周圍顯示。float之所以可以實現文字環繞是源於設置float屬性的元素可以脫離文檔流，使父元素高度塌陷。
好了知道了float的作用之后我們來實現三欄布局。
首先先 寫html模版代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動實現三欄布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } </style> </head> <body> <article class="main"> <div class="left">左</div> <div class="right">右</div> <div class="center">中 <h2>浮動布局</h2> </div> </article> </body> </html>
html模版寫好，那么我們開始實現CSS樣式:
這里我們給左右兩欄設置float屬性使其脫離文檔流左邊欄設置 float:left, 右邊欄設置float: right ,由於寬度高度已知所以我們可以給其設置指定的寬高 width:300px, height:100px
.left{ float: left; width: 300px; height: 100px; background: #631D9F; } .right{ float: right; width: 300px; height: 100px; background: red; }現在兩側的樣式寫好了,那么我們來寫中間的樣式,
.center{
margin-left: 300px;
margin-right: 300px;
background-color: #4990E2;
}這里為什么要設置margin-left、和margin-right呢？ 如果動手寫這個代碼的小伙伴會發現不設置這兩個屬性效果在中間元素內容比較少的時候效果是正常的，但是如果如果中間元素的子元素內容特別多的時候會出現如下情況:如下圖:
所以這兩個屬性還是需要添加的。到此位置float實現三欄布局已經OK了，這里特別提醒由於我們使用了float, 所以為了不影響其他元素的顯示這里需要清除浮動,清除浮動的方式有很多大家可以自行搜索使用我這里使用偽元素的方式
.main::after{ content:''; display: block; clear: both; }2、Position布局:
首先先寫html模版:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>position</title> <style type="text/css"> *{ margin: 0; padding: 0; } </head> <body> <article class="main"> <div class="left">左</div> <div class="center">中 <h2>絕對定位</h2> </div> <div class="right">右</div> </article> </body> </html>position是設置元素定位類型的那么我們該用那種定位呢？ 這里我們可以簡單了解一下屬性的類型
position其屬性有5種 :
inherit: 繼承父元素的position屬性值
static: 默認值，沒有定位
fixed: 生成絕對定位的元素,相對於瀏覽器窗口進行定位（不管屏幕內容怎么滑動,其位置不會改變）
relative:生成相對定位,相對於其正常位置進行定位
absolute:生成絕對定位的元素,相當於static定位以外的第一個父元素進行定位。
根據以上內容我們可以看出我們需要選擇給 左 中 右 都使用 absolute 絕對定位，由於absolute 是相當於static定位以外的第一個父元素進行定位，所以我們要給其父元素添加 position:relative屬性, 這樣這三個子元素可以相對於父元素進行絕對定位。
由此我們可以很簡單的寫出CSS樣式:
.left{ position: absolute; left: 0; width: 300px; background-color: red; } .center{ position: absolute; left: 300px; right: 300px; background-color: blue; } .right{ position: absolute; right: 0; width: 300px; background-color: #3A2CAC; }只要理解了position屬性的含義這種方式寫起來就比較簡單
3、table布局:
首先先寫html模版: 這里的html模版和 position使用的html一樣,這里就不復制代碼了。
table是一種常見的布局方式,他可以將整個頁面按照表格的方式設置為多行多列,但是由於書寫table標簽比較麻煩尤其是涉及到table內嵌table的時候，所以CSS給我們提供了display: table的方式可以讓讓們方便的使用table布局, 設置子元素為列的屬性為display:table-cell
了解了table布局的屬性那么就可以寫出CSS樣式:
.main{ width: 100%; display: table; } .left,.center,.right{ display: table-cell; } .left{ width: 300px; background-color: red; } .center{ background-color: blue; } .right{ width: 300px; background-color: red; }由於table布局本身已經有自己特有的屬性,所以我們只需要設置其dispaly屬性就可以達到我們的目的。使用起來還是很方便的。
4、彈性(flex)布局:
首先先寫html模版: 這里的html模版和 position使用的html一樣,這里就不復制代碼了。
flex布局是W3C提出了一種新的方案，可以簡便、完整、響應式地實現各種頁面布局。
當給元素設置display:flex，則該元素就是一個flex容器,其子元素就是容器成員,稱之為flex項目,每個項目默認按照從左到右方式排列，所以我們可以很輕松的寫出CSS樣式:
.main { display: flex; } .left{ width: 400px; background-color: red; } .center{ background-color: blue; word-break: break-word; } .right{ background-color: red; width: 400px; }如果想了解更多的flex布局大家可以查看一下鏈接:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
5、網格(gird)布局:
首先先寫html模版: 這里的html模版和 position使用的html一樣,這里就不復制代碼了。
網格它將網頁划分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局。
將屬性 display 值設為 grid 或 inline-grid 就創建了一個網格容器，所有容器直接子結點自動成為網格項目。
gird提供了 gird-template-columns、grid-template-rows屬性讓我們設置行和列的高、寬
根據屬性我們可以寫出如下CSS樣式:
.div{ width: 100%; display: grid; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; }只需要四行CSS代碼就可以實現三欄布局,是不是感覺到了gird的強大之處呢
總結:
以上提供了5種實現三欄布局的方式那么他們的優缺點呢？
1、float布局是現在用的比較多的布局很多門戶網站目前使用這個布局方式,使用的時候只需要注意一定要清除浮動。
2、Position布局只是根據定位屬性去直接設置元素位置,個人感覺不太適合用做頁面布局
3、table布局使用起來方便,兼容性也不存在問題，不利於搜索引擎抓取信息
4、flex布局比較強大,但是還是存在IE上兼容性問題，只能支持到IE9以上
5、grid布局很強大，但是兼容性很差。