摘要：而圣杯布局跟雙飛翼布局就是能夠不考慮主體的位置，能夠只通過代碼就改變相應的布局，這也是優點之一。如果在圣杯布局的基礎上，給它一個多余的標簽，把包起來，這就是雙飛翼布局。這里有個嘗試頁面，利用雙飛翼，實現了一套柵格化布局系統。

普通流(Normal Flow)

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在這個過程中，行內元素水平排列，直到當行被占滿然后換行，塊級元素則會被渲染為完整的一個新行， 除非另外指定，否則所有元素默認都是普通流定位，也可以說，普通流中元素的位置由該元素在 HTML 文檔中的位置決定。

浮動 (Floats)

在浮動布局中，元素首先按照普通流的位置出現，然后根據浮動的方向盡可能的向左邊或右邊偏移，其效果與印刷排版中的文本環繞相似。

絕對定位 (Absolute Positioning)

在絕對定位布局中，元素會整體脫離普通流，因此絕對定位元素不會對其兄弟元素造成影響（如果看了上文的童鞋，會發現這點與浮動元素會影響兄弟元素是不同的），而元素具體的位置由絕對定位的坐標決定。

BFC 正是屬于普通流的，因此它對兄弟元素也不會造成什么影響。

塊格式化上下文（block formatting context） 是頁面 CSS 視覺渲染的一部分。它是用于決定塊盒子的布局及浮動相互影響的一個區域。 --MDN 塊格式上下文

我的理解是，BFC是一個環境，在這個環境中的元素不會影響到其他環境中的布局，也就是說，處于不同BFC中的元素是不會互相干擾的。

根元素或其它包含它的元素

浮動元素，float除none以外的值

絕對定位元素 (元素的 position 為 absolute 或 fixed)

display為以下其中之一的值：inline-block,table-cell,table-caption

overflow 的值不為 visible的元素

彈性盒子 flex boxes (元素的 display: flex 或 inline-flex)

其中，最常見的就是overflow:hidden、float:left/right、position:absolute。也就是說，每次看到這些屬性的時候，就代表了該元素以及創建了一個BFC了。

內部的盒會在垂直方向一個接一個排列（可以看作BFC中有一個的常規流）；

處于同一個BFC中的元素相互影響，可能會發生margin collapse；

每個元素的margin box的左邊，與容器塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此；

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然；

計算BFC的高度時，考慮BFC所包含的所有元素，連浮動元素也參與計算；

浮動盒區域不疊加到BFC上；

阻止外邊距折疊

兩個相連的塊級元素在垂直上的外邊距會發生疊加，有些把這種情況看作是bug，但我覺得可能是出于段落排版的考慮，為了令行間距一致才有的這一特性。我們先來看看例子：

first
second

*{margin: 0px;padding: 0px}
p {
    color: red;
    background: #eee;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 10px;
    border: solid 1px red;
}

從上面可以看出，我們給兩個p元素都設置margin,但中間的間距卻發生了折疊。然后舉個BFC的例子：

.ele{
    overflow: hidden;
    border: solid 1px red;
}

    
first


    
second

從上面可以看出，我們為每個div元素設置overflow的值為hidden,產生一個塊級格式上下文，因為外邊距不會相互重疊。

BFC可以包含浮動的元素

//html

    
float
    
float





    
float
    
float

*{margin: 0px;padding: 0px}
.floatL{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
    text-align: center;
    line-height: 100px;
}
.box{
    border: 1px solid red;
    width: 300px;
    margin: 100px;
    padding: 20px;
}
.BFC{
    overflow: hidden;
    *zoom: 1;
}

從運行結果可以看出，如果塊級元素里面包含著浮動元素會發生高度塌陷，但是將它變成一個BFC后，BFC在計算高度時會自動將浮動元素計算在內。

BFC可以阻止元素被浮動元素覆蓋

box1
box2

*{margin: 0px; padding: 0px}

.box1{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(0, 0, 255, 0.5);
    border: 1px solid #000;
    float: left;
}
.box2{
    width: 200px;
    height: 200px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.5);
    border: 1px solid #000;
    /* overflow: hidden; */
    /* *zoom: 1; */
}

從上面看出，當元素浮動后，會與后面的塊級元素產生相互覆蓋。那怎么解決這個問題，只要為后面的元素創建一個BFC。添加overflow屬性到box2上。

overflow: hidden;
*zoom: 1;

這樣子阻止了浮動元素重疊的問題。

除了使用 overflow: hidden 觸發 BFC 外，還使用了一個 *zomm: 1 的屬性，這是 IEhack ，因為 IE6-7 并不支持 W3C 的 BFC ，而是使用私有屬性 hasLayout 。從表現上來說，hasLayout 跟 BFC 很相似，只是 hasLayout 自身存在很多問題，導致了 IE6-7 中一系列的 bug 。觸發 hasLayout 的條件與觸發 BFC 有些相似，推薦為元素設置 IE 特有的 CSS 屬性 zoom: 1 觸發 hasLayout ，zoom 用于設置或檢索元素的縮放比例，值為“1”即使用元素的實際尺寸，使用 zoom: 1 既可以觸發 hasLayout 又不會對元素造成其他影響，相對來說會更為方便。

拓展閱讀：

Block formatting context(塊級格式化上下文)

學習塊格式化上下文

BFC與hasLayout

經典的清除浮動：

//利用偽元素清除浮動
.clearfix:after {
     content:"."; 
     display:block; 
     height:0; 
     visibility:hidden; 
     clear:both; 
}
.clearfix { 
    *zoom:1; 
}

拓展閱讀：
那些年一起清除過的浮動

各種各樣的布局，無非就是用了浮動 float，負邊距，相對定位，通過這三者的巧妙組合跟拼湊來實現的。用好這些，布局就會很簡單。

還沒學會布局時，就聽到有圣杯布局和雙飛翼布局，這布局都有這么風騷的名字，就覺得很酷，事實也如此，了解了圣杯布局和雙飛翼布局，才發現挺深奧的。

傳統的布局中，當我們需要改變兩欄的互換，就會很麻煩。因為還要涉及到 HTML 代碼的修改，不能完全從 CSS 上更改，這叫 HTML 和 CSS 的耦合。而圣杯布局跟雙飛翼布局就是能夠不考慮主體的位置，能夠只通過 CSS 代碼就改變相應的布局，這也是優點之一。

試試這樣的HTML結構：

header

    
main
    
sub
    
extra

footer

給它加上CSS樣式：

body{ margin: 0; padding: 0; font-size: 1.5em; font-weight: bold; min-width: 500px;}
.header,.footer{ text-align: center;}
.header{ height: 50px; background-color: #76ffff;}
.footer{ height: 50px; background-color: #ff7676;}
.main{ background-color: #666;}
.sub{ background-color: #44fa44;}
.extra{ background-color: #3dbdff;}
/*start*/
.main{
    width: 100%;
    float: left;
}
.sub{
    width: 100px;
    float: left;
    margin-left: -100%;
}
.extra{
    width: 200px;
    float: left;
    margin-left: -200px;
}
.container{
    overflow: hidden;
}

結果如下：

會發現，main的位置不正確，所以再給container加上 padding: 0 200px 0 100px;

雖然 main 的位置正確了，可是 sub 和 extra 位置優點不對，所以我們再用上相對定位，為 sub 和 extra 加上如下代碼：

.sub{
    position: relative;;
    left: -100px;
}
.extra{
    position: relative;
    right: -200px;
}

效果就出來了，

噢耶，這就是圣杯布局。如果在圣杯布局的基礎上，給它一個多余的標簽，把 mian 包起來，這就是雙飛翼布局。

HTML結構：

header

    

        
main
    
    
sub
    
extra

footer

CSS結構：

body{ margin: 0; padding: 0; font-size: 1.5em; font-weight: bold; min-width: 500px;}
.header,.footer{ text-align: center;}
.header{ height: 50px; background-color: #76ffff;}
.footer{ height: 50px; background-color: #ff7676;}
.main{ background-color: #666;}
.sub{ background-color: #44fa44;}
.extra{ background-color: #3dbdff;}
/*start*/
.main{
    width: 100%;
    height: 100px;
    float: left;
}
.sub{
    width: 100px;
    height: 100px;
    float: left;
    margin-left: -100%;
}
.extra{
    width: 200px;
    height: 100px;
    float: left;
    margin-left: -200px;
}
.main-wrap{
    margin: 0 200px 0 100px;
}
.container{
    height: 100px;
    overflow: hidden;
    *zoom: 1;
}

可以看到，只要為包住 main-wrap 設置 margin，連相對定位都沒用到，效果就出來了。

如果把三欄布局比作一只大鳥，可以把main看成是鳥的身體，sub和extra則是鳥的翅膀。這個布局的實現思路是，先把最重要的身體部分放好，然后再將翅膀移動到適當的地方。因此請容許我給這個布局實現取名為雙飛翼布局（Flying Swing Layout）.
就如上圖中的鳥有各種姿勢一樣，利用雙飛翼布局，我們也可以實現各種布局。這里有個嘗試頁面，利用雙飛翼，實現了一套柵格化布局系統。

優點：

實現了內容與布局的分離，這是漸進式增強布局的思想，從內容出發，不考慮布局。

main部分是自適應寬度的，很容易在定寬布局和流體布局中切換。

任何一欄都可以是最高欄，不會出問題。

需要的hack非常少（就一個針對ie6的清除浮動hack:_zoom: 1;）
在瀏覽器上的兼容性非常好，IE5.5以上都支持。

缺點：

main需要一個額外的包裹層。

normalize 的理念則是盡量保留瀏覽器的默認樣式，不進行太多的重置。

reset 的目的，是將所有的瀏覽器的自帶樣式重置掉，這樣更易于保持各瀏覽器渲染的一致性。

/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,5b8b4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}

以上reset來自NEC的css reset。

拓展閱讀：
Normalize.css 和 Reset CSS 有什么本質區別？

IE條件注釋是一種特殊的HTML注釋，這種注釋只有IE5.0及以上版本才能理解。比如普通的HTML注釋是：

　　而只有IE可讀的IE條件注釋是：

　　“非IE條件注釋”：
 non-IE HTML Code 
　　“非特定版本IE條件注釋”（很少用到）：

Code for browsers that match the if condition

簡而言之，除了“Windows上的IE”之外的所有瀏覽器都會認為條件注釋只是一段普通的HTML注釋。你不能在CSS代碼中使用條件注釋。IE條件注釋是很有用的對IE隱藏或者展現特定代碼的方法，比起在CSS中用詭異的_/制造bug，利用IE條件注釋來寫CSS “hacks”是更合理的方法。通俗點，條件注釋就是一些if判斷，但這些判斷不是在腳本里執行的，而是直接在html代碼里執行的。

條件注釋的基本結構和HTML的注釋()是一樣的。因此IE以外的瀏覽器將會把它們看作是普通的注釋而完全忽略它們。

IE將會根據if條件來判斷是否如解析普通的頁面內容一樣解析條件注釋里的內容。

條件注釋使用的是HTML的注釋結構，因此他們只能使用在HTML文件里，而不能在CSS文件中使用。

從語法上看這是相當合法的普通HTML注釋。任何瀏覽器都會認為之間的部分是注釋從而忽略它。但是IE也會看到其中[if IE]>，從而開始解釋接下來的代碼直到遇到

通過“比較操作符”可以更靈活地對IE版本進行控制，用法是在IE前面加上“比較操作符”。合法的操作符如下：

lte：就是Less than or equal to的簡寫，也就是小于或等于的意思。

lt ：就是Less than的簡寫，也就是小于的意思。

gte：就是Greater than or equal to的簡寫，也就是大于或等于的意思。

gt ：就是Greater than的簡寫，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判斷符相同

 / 如果IE版本大于5.5 /
 / 如果IE版本小于等于6 /
 / 如果瀏覽器不是IE /

常用的IE條件注釋

要實現行內元素的水平居中,只需把行內元素包裹在塊級父層元(

.container{
  text-align: center;
}

.container{
    margin: 0 auto;
}

.container{
    position: relative;
}
.center{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

.container{
  position: relative;
}
.center{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.container{
  width: 600px;
  height: 600px;
  background: #eee;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.center{
  background: blue; 
}

.container{
  width: 100%;
  height: 400px;
  background: #eee;
  position: relative;
}
.center{
  background: blue;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container{
  width: 100%;
  height: 400px;
  background: #eee;
  /* flex 布局解決水平居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.center{
  width: 100px;
  height: 100px;
  background: blue;
  text-align: center;
}

notes：CSS3的transform和flex有兼容性問題。ie11+才支持flexbox布局。

• 上一篇：CSS：布局 - 水平垂直居中
• 下一篇：浮動相關