所謂三欄布局，即使指兩邊定寬，中間寬度自使用的布局方式，在過去，一直是乙個麻煩的問題，
為了解決這個問題，有各種奇技淫巧，最出名的非聖杯布局和雙飛翼布局莫屬了，但是自css3發展以來，
特別是flexbox布局的支援度越來越好，這個問題也越來越淡化了
浮動布局
html如下：left
right
main
css如下：body, html
.left
.main
.right
浮動布局**比較簡潔，同時也易於理解，但是浮動往往會帶來塌陷等問題，而且浮動渲染計算量納悶main部分將會佔滿剩餘空間，right也就被擠到下一行了，相反，如果我們設定了right和left，在設定main
main部分將會流入left和right的下面，從而達到我們的目的
絕對定位
html如下：left
main
right
css如下：body, html
.left, .right
.left
.right
.main
該方法有個明顯的缺點，就是如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況聖杯布局
聖杯布局巧妙的利用負margin來使元素上移，再結合相對定位，移到外層容器的padding位置，從而達到目標
html如下：
main
left
right
css如下：body, html
body
.left
.main
.right
.container
問題：如果外層內容盒寬度過小，不足以容納.left的寬度，那麼.left依然會被保留在下層雙飛翼布局
雙飛翼布局與聖杯布局原理類似，只不過是取消了外層的padding，從而使內容盒等於padding-box從而避免了.left上移後需要設定left值移動到padding
html如下：
main
left
right
css如下：body, html
body
.left
.main
.right
.inner
與聖杯布局不同的地方已用注釋指出，而雙飛翼問題與聖杯一樣flexbox布局
flexbox布局可謂是最為理想的解決方案了，一方面，**簡潔易懂，另一方面，當寬度太小時，也可以通過伸縮，避免重疊
html如下：
main
left
right
css如下：body,html
body
.left
.main
.right
三欄布局總結
中間寬度自適應，兩邊寬度固定的三欄布局，是前端頁面開發中極為常見 布局方式。博主認為，一名合格的前端工程師總是會將之熟記於心。以下是博主總結的五種三欄布局的常用方法，與大家分享。浮動布局是一種極易理解，也是初學者首先想到的布局方式。僅借用css的float屬性即可輕鬆實現。html class le...
CSS 三欄布局方法總結
其中，左右分別為100px，中間自適應。html class left leftdiv class right rightdiv class center centerdiv css container float div container float left container float c...
三欄布局與兩欄布局
html 左邊定寬div 右邊自適應,前端前端前端前端前端前端前端前端前端前端div 1.left right 2.left right 3.left right 1.聖杯布局 class container class middle 中間div class left 左側div class rig...