在網頁設計中，分欄布局是常用的布局手法，一般有兩欄布局，三欄布局。這其中又以部分欄固定，部分欄自適應的方式最為常見。下面我們先以常見的三欄布局開始，描述一下常用的幾種實現方案。三欄布局最常見的就是左右定寬，中間自適應的方式，我們就先以這種方案開始講述。
首先我們先假設頁面的高度固定為100畫素，下面先快速地看一遍，五種布局方案的實現方法。
浮動布局
絕對定位的布局
**布局
flex布局
網格布局
這幾種布局方案，表面上看起來沒有什麼問題，但是這是在我們假設固定了高度的情況下，如果高度是不固定的，這幾種布局方案就會帶來一系列的問題：
浮動布局
這個時候，我們可以看到，頁面的布局已經亂了，至於為什麼會亂，做過「首字下沉」效果，或者「**混排」效果的同學，應該知道這其中的原因，是因為在css的浮動機制中，當容器中存在乙個浮動的元素時，緊隨其後的元素的內容，會緊貼該元素的右邊框進行排列，如果超出該元素的高度後，則會緊貼父元素的最左邊框進行排列（右浮動則相反）。
要解決這個問題，有很多種方案：
給中間的元素增加左右各100畫素的padding值，如果使用這種方法，需要自己想辦法處理背景的問題：
建立bfc，為中間元素創造塊格式上下文，最常見的做法就是設定 overflow 為 hidden（也有人用 auto ）：
接下來我們看一下絕對定位布局。
網頁設計中分欄布局的幾種實現方案
在網頁設計中，分欄布局是常用的布局手法，一般有兩欄布局，三欄布局。這其中又以部分欄固定，部分欄自適應的方式最為常見。下面我們先以常見的三欄布局開始，描述一下常用的幾種實現方案。三欄布局最常見的就是左右定寬，中間自適應的方式，我們就先以這種方案開始講述。首先我們先假設頁面的高度固定為100畫素，下面先...
網頁設計的布局有哪幾種
網頁可以說是 構成的基本元素。當我們輕點滑鼠，在網海中遨遊，一副副精彩的網頁會呈現在我們面前，那麼，網頁的精彩與否的因素是什麼呢？色彩的搭配 文字的變化 的處理等，這些當然是不可忽略的因素，除了這些，還有乙個非常重要的因素 網頁布局。下面 萬戶網路談下有關網頁布局型別.網頁布局型別 網頁布局大致可分...
標準的網頁布局設計流程
其實標準的網製作完成的工作實際是 psd to html，一般情況下，我們會拿到美工的psd,這時候不同的人會有不同的做法 1.開啟fireworks將切割匯出為html。3.先在ps中完成切圖後，在文字編輯器中看著效果圖一步步的製作。以上是大多被採用的方法，但都不好 第一種方法最為不好，這樣的 根...