參考：
相同點：利用布局，可優先渲染主要部分
不同點：
聖杯布局：借助的是其他非主要元素覆蓋了其父元素的padding值所佔據的寬度，同乙個杯子，非主要元素其只是佔據了全部容器的padding值部分；
雙飛翼布局：給主要部分main-wrap新增乙個外層元素main，其他非主要元素所佔據的空間是主要部分(main-wrap)的margin空間，像鳥的兩個翅膀，與主要部分main脫離(main和main-wrap是下面雙飛翼布局的元素id)
優點：不需要新增dom節點
缺點：聖杯布局的缺點：正常情況下是沒有問題的，但是特殊情況下就會暴露此方案的弊端，如果將瀏覽器無線放大時，「聖杯」將會「破碎」掉。如圖，當main部分的寬小於left部分時就會發生布局混亂。（main<
!doctype html>
"utf-8"
>
<
/title>
"text/css"
>
padding:
0100px;
overflow:hidden;
}.col
.main
.left,
.right
.left
.right
<
/style>
<
/head>
=>
="col main"
>main<
/section>
="col left"
>left<
/aside>
="col right"
>right<
/aside>
<
/section>
<
/body>
<
/html>目的：為了優先顯示中間主要部分，瀏覽器渲染引擎在構建和渲染渲染樹是非同步的（誰先構建好誰先顯示），故在編寫時，先構建中間main部分，但由於布局原因，將left置於center左邊，故而出現了雙飛翼布局。
優點：不會像聖杯布局那樣變形
缺點：多加了一層dom節點
<
!doctype html>
"utf-8"
>
<
/title>
"text/css"
>
body
.col
#main
#main-wrap
#left,#right
#left
#right
<
/style>
<
/head>
"container"
>
"main"
class
="col"
>
"main-wrap"
> #main <
/div>
<
/div>
"left"
class
="col"
>#left<
/div>
"right"
class
="col"
>#right<
/div>
<
/div>
<
/body>
<
/html>
<
!doctype html>
"utf-8"
>
<
/title>
header,footer
}.main
.left,
.right
.left
.right
<
/style>
<
/head>
header<
/header>
=>
="col main"
>main<
/section>
="col left"
>left<
/aside>
="col right"
>right<
/aside>
<
/section>
footer<
/footer>
<
/body>
<
/html>
經典布局 兩邊固定中間自適應
方法一 左右使用浮動，中間設定margin left和margin right 這種方式很簡單，就是讓左邊的左浮動，右邊的右浮動，然後通過設定中間的margin將內容從兩邊拉回來。例項效果圖.png 如下 我是右邊 我是中間 方法二在container中，我們將middle放在left和right的...
CSS 三欄布局，兩邊固定，中間自適應
基於純float實現的三欄布局需要將中間的內容放在html結構的最後，否則右側會沉在中間內容的下側原理 元素浮動後，脫離文件流，後面的元素受浮動影響，設定受影響元素的margin值即可 基於絕對定位的三欄布局 注意絕對定位的元素脫離文件流，相對於最近的已經定位的祖先元素進行定位。無需考慮html中結...
css實現兩邊固定，中間自適應
經常有需求，所以就總結一下，有需要的時候直接複製貼上啦 布局的原理是margin負值法。首先需要在center元素外部包含乙個div，包含div需要設定float屬性使其形成乙個bfc，並設定寬度，並且這個寬度要和left塊的margin負值進行配合，具體原理參考這裡。這裡對聖杯布局解釋特別詳細。h...