前言HTML頁面的布局在前端面試中應該算是很常見的題目了，大家能夠熟練的寫出多少呢html和css面試題目？
今天這篇文章我們一起來看看在HTML中，如何通過CSS來實現常見的兩欄和三欄布局吧。
CSS
布局1-左側定寬，右側自適應左側定寬，右側自適應的布局在后臺管理系統中是很常見的，左側是目錄頁，右側是內容區，根據路由切換動態展示。
我們首先來看看實現的效果，在瀏覽器寬度變窄的時候，左側寬度依然保持不變，右側寬度動態變化。
布局1
對于這種簡單的兩欄布局，我們先來看看HTML部分的代碼，就是很簡單的一個外部容器包含兩個子元素。
HTML代碼
對于以上的效果，我們有兩種實現方式。
float浮動
給左側定寬元素設置float屬性，右側元素設置margin屬性。注意，為了讓效果展示更好，我們給div設置了一個高度，實際開發中，div會根據內容高度自動撐開。
float方式
雙浮動+calc寬度
給左右兩側div都設置為浮動，然后利用calc方法動態計算右側div的寬度同樣可以達到這個效果。
得到的代碼如下所示。
雙浮動+calc
布局2-左右兩側定寬，中間自適應左右兩側定寬，中間自適應的布局在blog類型的網站中是比較常見的。
左側放置blog分類導航，右側放個人信息，中間內容區域動態顯示文章內容。
我們同樣來看看實際完成的效果。
實際效果
我們同樣講解兩種方法。
方法1-左右浮動，中間margin
我們將左側div浮動設置為left，右側div浮動設置為right，中間的div根據左右兩側div寬度設置margin值。
注意：在頁面排版的HTML元素不在是left，middle，right，而是left，right，middle。
方法1-HTML
然后我們看看CSS部分代碼。
首先給外層容器一個高度，并設置寬度為100%，并讓內層div高度為父容器的高度。
父容器CSS
然后是內層布局div的CSS屬性。
內層CSS屬性
其中的middle元素的margin值是根據left和right元素的寬度值確定的。
方法2-同時浮動，中間calc計算寬度
第二種方法是給左中右三個div同時設置為左浮動，給左右兩側div定寬度，中間的div利用calc動態計算寬度。
注意：這種方式下，頁面HTML排版元素正常表示為left，middle，right。
方法2-頁面HTML元素
經上述分析后，CSS部分代碼如下所示。
方法2-CSS代碼
方法3-flex布局
flex布局在移動端已經是最常見的一種布局方式了，我會專門寫一篇文章來具體講解如何使用flex布局。
針對這個問題，通過flex布局的方式可以很容易解決。
首先給外層容器的display設置為flex。
父容器CSS屬性
左右兩側div和之前一樣設置定寬即可；最后是給中間的div設置flex屬性。
內層CSS屬性
其中有個flex:1; 我注釋了關鍵屬性，在這里簡單解釋一下。
因為left和right兩個div都已經設置了寬度，而對它們又沒有設置flex屬性；對于middle的div，設置了flex:1; 表示的是剩余空間將全部分配給middle，就可以達到自適應寬度的要求。
結束語今天這篇文章講述了兩種簡單的頁面布局，每種布局都采用了兩到三種方法實現，主要給大家提供不同的思路，大家如果有其他更好的方案也歡迎交流。
