HTML CSS實現兩欄和三欄布局

三欄布局

三列自適應布局通常指兩邊定寬，中間部分寬度自適應。這裡主要分為兩大類，一類是基於position傳統的實現，一類是基於css3新特性彈性盒模型布局實現。

1.基於傳統的position進行布局

1).絕對定位法

絕對定位法原理是將左右兩邊使用absolute定位，因為絕對定位使其脫離文件流，後面的center會自然流動到他們上面，然後使用margin屬性，留出左右元素的寬度，既可以使中間元素自適應螢幕寬度。

該法布局的好處：三個div順序可以任意改變；不足：因為絕對定位，所以如果頁面上還有其他內容，top的值需要小心處理，最好能夠對css樣式進行乙個初始化,如果不對樣式進行初始化，則兩邊和中間的值會對不齊。另外，隨著瀏覽器視窗縮小，小於200px的時候，會發生壓縮。

2).使用自身浮動法

自身浮動法的原理就是使用對左右使用分別使用float:left和float:right，float使左右兩個元素脫離文件流，中間元素正常在正常文件流中，使用margin指定左右外邊距對其進行乙個定位。

該布局使用左右中或者右左中的順序編寫html結構，這種布局方法的好處：受外界影響小，但是不足：三個元素的順序，center一定要放在最後，這是和絕對定位不一樣的地方，center佔據文件流位置，所以一定要放在最後，左右兩個元素位置沒有關係。當瀏覽器視窗很小的時候，右邊元素會被擠到下一行。

3).聖杯布局

聖杯布局的原理是margin-left負值法。使用聖杯布局首先需要在center元素外部包含乙個div，包含div需要設定float屬性使其形成乙個bfc，並設定寬度，並且這個寬度要和left塊的margin負值進行配合。

該方法在**布局中非常常見，也是面試常考點，優點是三欄相互關聯，有一定的抗性。需要注意的是，布局中間部分一定要放在前面，左右順序不限制。對於left快的margin負值一定要等於wrap的寬度。

兩欄布局目標：

實現側邊欄固定寬度，剩餘部分寬度自適應

1、兩列自適應

兩列自適應是特別簡單的布局方式，其要點在於把列寬用百分百來表示，然後可以使用 float 或 display：inline-block 等方法來讓兩列處於同一行

方法一：使用 float

優點：簡單

缺點：兩列都脫離了文件流，兩列後面的內容或父盒子無法被撐起（上圖中的綠色是父盒子），故需要清除浮動。

方法二：使用 display：inline-block

優點：簡單

缺點：兩列都脫離了文件流，兩列後面的內容或父盒子無法被撐起（上圖中的綠色是父盒子），故需要清除浮動。