在網頁設計中，分欄布局是常用的布局手法，一般有兩欄布局，三欄布局。這其中又以部分欄固定，部分欄自適應的方式最為常見。下面我們先以常見的三欄布局開始，描述一下常用的幾種實現方案。
三欄布局
三欄布局最常見的就是左右定寬，中間自適應的方式，我們就先以這種方案開始講述。
首先我們先假設頁面的高度固定為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的浮動機制中，當容器中存在一個浮動的元素時，緊隨其后的元素的內容，會緊貼該元素的右邊框進行排列，如果超出該元素的高度后，則會緊貼父元素的最左邊框進行排列（右浮動則相反）。
要解決這個問題，有很多種方案：
- 給中間的元素增加左右各100像素的padding值，如果使用這種方法，需要自己想辦法處理背景的問題：
- 創建BFC，為中間元素創造塊格式上下文，最常見的做法就是設置 overflow 為 hidden（也有人用 auto ）：
接下來我們看一下絕對定位布局。