本文主要闡述了，自己在對這篇文章（http://www.cnblogs.com/imwtr/p/4441741.html）的理解過程中感到困惑的地方做個補充。

先對圣杯布局作補充：
之前對盒模型不是很理解，只知道單獨的一個盒子是怎樣的。但是，卻不知道多個盒子在嵌套，并列時，相互之間的關(guān)系該是如何的。

• 由于父container設(shè)置了左右padding，所以 父container的所有子元素在水平方向的活動區(qū)域 被限制在(窗口的寬度 減去 父container的左右padding)這個范圍內(nèi)。為了之后敘述方便稱“(窗口的寬度 減去 父container的左右padding)”為tWidth。
  由于middle設(shè)置了width：100%，所以middle的寬度為tWidth。
• 在middle, left, right設(shè)置了float之后，middle占據(jù)第一行，left，right在第二行從左到右緊挨著排列(left, right之所以在第二行，是因為middle的寬度占滿了第一行，所以left，right被擠到了第二行)。
• 在left被設(shè)置了margin-left: -100%后(margin-left的value取正整數(shù)時，left元素會相對其左側(cè)元素的右邊框向右移動。value取負值，left元素則向左移動)，向左移動tWidth的寬度。
  (可以把middle和left看作是緊挨著的2個元素，只不過第一行沒有空間放置left，才把left放置到第二行) 將left元素向左移動tWidth后，正好middle和left的左邊框?qū)R。
  在left元素移動后，right元素左側(cè)緊貼middle元素右側(cè)，位于第二行。接著設(shè)置margin-left：-220px后，right左移了220px。并且right寬度為220px，所以 right右側(cè)緊貼middle元素右側(cè)。
• left，right元素設(shè)置relative，并且使用left，right屬性調(diào)整position。使得left，right元素占據(jù) 父container的padding區(qū)域。

雙飛翼布局 不同于 圣杯布局的地方 在于：

• 雙飛翼：main，sub，extra三者并列浮動。main元素包含了main-inner元素。
  圣杯： middle，left，right三者并列浮動。沒有嵌套。
• main的寬度100%占據(jù)窗口的寬度。sub的margin-left：-100%也是左移了窗口的寬度。
• main-inner設(shè)置margin-left和margin-right是為了使自己的內(nèi)容想中間縮。這樣移動left元素，right元素后，不會疊在main-inner的內(nèi)容上。

自己可能說的不太清楚，果然自己理解不透 是給別人 講不清的。那就先這樣吧。