網頁設計中分欄佈局的幾種實現方案

在網頁設計中，分欄佈局是經常使用的佈局手法，通常有兩欄佈局，三欄佈局。這其中又以部分欄固定，部分欄自適應的方式最爲常見。下面咱們先以常見的三欄佈局開始，描述一下經常使用的幾種實現方案。

三欄佈局

三欄佈局最多見的就是左右定寬，中間自適應的方式，咱們就先以這種方案開始講述。

首先咱們先假設頁面的高度固定爲100像素，下面先快速地看一遍，五種佈局方案的實現方法。

浮動佈局

https://jsfiddle.net/chenfeng...

絕對定位的佈局

https://jsfiddle.net/chenfeng...

表格佈局

https://jsfiddle.net/chenfeng...

flex佈局

https://jsfiddle.net/chenfeng...

網格佈局

https://jsfiddle.net/chenfeng...

沒有了高度以後

這幾種佈局方案，表面上看起來沒有什麼問題，可是這是在咱們假設固定了高度的狀況下，若是高度是不固定的，這幾種佈局方案就會帶來一系列的問題：

浮動佈局

https://jsfiddle.net/chenfeng...
由於jsfiddle嵌入在文章裏面的緣由，在預覽界面看不到問題所在，點開連接後看到的頁面以下圖所示：

這個時候，咱們能夠看到，頁面的佈局已經亂了，至於爲何會亂，作過「首字下沉」效果，或者「圖文混排」效果的同窗，應該知道這其中的緣由，是由於在CSS的浮動機制中，當容器中存在一個浮動的元素時，緊隨其後的元素的內容，會緊貼該元素的右邊框進行排列，若是超出該元素的高度後，則會緊貼父元素的最左邊框進行排列（右浮動則相反）。

要解決這個問題，有不少種方案：

1. 給中間的元素增長左右各100像素的padding值，若是使用這種方法，須要本身想辦法處理背景的問題：
   
2. 建立BFC，爲中間元素創造塊格式上下文，最多見的作法就是設置 overflow 爲 hidden（也有人用 auto ）：
   

接下來咱們看一下絕對定位佈局。