摘要：示例添加這一行規(guī)則結(jié)果就會變成這樣我們把這種現(xiàn)象稱為浮動(dòng)滑移，可以使用三種方法來預(yù)防發(fā)生從設(shè)定的元素寬度中減去添加的水平外邊距邊框和內(nèi)邊距的寬度和。當(dāng)我們?nèi)∠催x該屬性時(shí)，欄就會由于欄的推擠產(chǎn)生了浮動(dòng)滑移，移位到欄下方。

多欄布局有三種基本的實(shí)現(xiàn)方案：固定寬度、流動(dòng)、彈性。

固定寬度。布局的大小不會隨用戶調(diào)整瀏覽器窗口大小而變化，一般是 900 到 1100 像素寬（最常見的是 960 像素）。

流動(dòng)。布局的大小會隨用戶調(diào)整瀏覽器窗口大小而變化。（結(jié)合 CSS 媒體查詢，能夠適應(yīng)最大和最小的屏幕，業(yè)界稱之為 響應(yīng)式設(shè)計(jì)。）

彈性。在瀏覽器窗口變寬時(shí)，不僅布局變寬，而且所有內(nèi)容元素的大小也會變化。（實(shí)現(xiàn)太過復(fù)雜，不多介紹。）

多數(shù)情況下，布局中結(jié)構(gòu)化元素（乃至任何元素）的高度是 不必或者不應(yīng)該設(shè)定的。因?yàn)楸３衷?height 屬性的默認(rèn)值 auto 不變，才能使元素根據(jù)自己包含內(nèi)容的增加而在垂直方向上擴(kuò)展。這樣擴(kuò)展的元素會把下方的元素向下推，而布局也能隨內(nèi)容數(shù)量的增減而垂直伸縮。

為了使瀏覽器窗口寬度合理變化，布局能作出適當(dāng)?shù)恼{(diào)整，我們 需要精細(xì)地控制 布局寬度。

結(jié)構(gòu)如下：

上代碼：

    
    
    


    

        

            This is header.
        
        
        

            This is article.

            This is article.

            This is article.

            This is article.

            This is article.

            This is article.

            This is article.

            This is article.

            This is article.

        
        
        
    

結(jié)果如圖：

說明幾點(diǎn)：

通過給整個(gè)外包裝（#wrapper）設(shè)定寬度值（960px），并將其水平外邊距設(shè)定為 auto，就能實(shí)現(xiàn)居中。隨著向里面添加內(nèi)容，相關(guān)的欄的高度會增加。

設(shè)置寬度并浮動(dòng)中間三欄（nav、article 和 aside），讓它們并排顯示。使用屬性：width 和 float。

三欄的總寬度加起來要等于外包裝的寬度（150 + 600 + 210 = 960）。同樣使用該方法就可以加任意多欄，只要它們的總寬度等于外包裝的寬度即可。

頁腳（footer）位于浮動(dòng)元素后面，所以就會盡量往上移動(dòng)。解決這個(gè)問題的方法就是使用 清除浮動(dòng)（clear:both;或者使用clear:left;也可以，因?yàn)檫@里只有左浮動(dòng)元素）。

在上面的布局中，只要一調(diào)整各欄中的內(nèi)容，布局就可能超過容器寬度，而右邊的欄就可能滑到左邊的欄下方。例如為了讓內(nèi)容與欄邊界空開距離，為欄添加水平外邊距和內(nèi)邊距，或者為了增加愛欄間距，為欄添加外邊距，導(dǎo)致布局寬度增大，進(jìn)而浮動(dòng)欄下滑；又或者在欄中添加大圖片，或者沒有空格的長字符串（如長URL），也會導(dǎo)致欄寬大超過布局寬度。

示例：

article{
    background: #ffed53;
    width: 600px;
    float: left;
    padding: 10px 20px;    /* 添加這一行CSS規(guī)則 */
}

結(jié)果就會變成這樣：

我們把這種現(xiàn)象稱為 浮動(dòng)滑移，可以使用三種方法來預(yù)防發(fā)生：

從設(shè)定的元素寬度中減去添加的水平外邊距、邊框和內(nèi)邊距的寬度和。

在容器內(nèi)部的元素上添加內(nèi)邊距或外邊距。

使用 CSS3 的 box-sizing 屬性切換盒子縮放方式。應(yīng)該該屬性后，給元素添加邊框和內(nèi)邊距都不會增大盒子，相反會導(dǎo)致內(nèi)容變窄。

下面來討論這三種方法：

由于上面給 article 欄添加了左右 20px 的水平邊距，故將該欄寬度從 600px 減至 560px，故修改后的 article 欄 css 樣式規(guī)則如下：

article{
    background: #ffed53;
    width: 560px;    /* 這里 */
    float: left;
    padding: 10px 20px;   /* 別忘了這里 */
}

效果如下：

雖然能實(shí)現(xiàn)，但每次只要調(diào)整內(nèi)、外邊距就要重設(shè)布局寬度，非常煩人，而且還可能導(dǎo)致頁面錯(cuò)亂。

把外邊距和內(nèi)邊距應(yīng)用到內(nèi)容元素上確實(shí)有效，前提是這些元素沒有明確地設(shè)定寬度，這樣它們的內(nèi)容才會隨著內(nèi)、外邊距的增加而縮小。

  
根據(jù)盒模型定義，沒有寬度的元素在水平方向上會適應(yīng)其父元素，其內(nèi)容會隨著外邊距、邊框和內(nèi)邊距的增加而減少。

考慮到將來修改的時(shí)候，一欄中可能包含大量不同內(nèi)容的元素，如果想重新調(diào)整內(nèi)容與容器邊界的距離，就必須每個(gè)元素都要進(jìn)行調(diào)整，這樣不僅麻煩，而且容易出錯(cuò)。況且，給欄添加邊框同樣會增大欄寬，不可能通過為其包含的內(nèi)容元素逐個(gè)添加應(yīng)用樣式來做到。

所以說，與其為容器中的元素添加外邊距，不如 在欄中再添加一個(gè)沒有寬度的 div，讓它包含所有內(nèi)容元素，然后再給這個(gè) div 應(yīng)用邊框和內(nèi)邊距。如此一來，只要為內(nèi)部 div 設(shè)定一次樣式，就可以把讓所有內(nèi)容元素與欄邊界保持一致的距離。而且，將來再需要調(diào)整時(shí)也會很方便。任何新增內(nèi)容元素的寬度都由這個(gè)內(nèi)部 div 決定。

還是拿 article 欄來開刀：

    
    
        This is article.

        This is article.

        This is article.

        This is article.

        This is article.

        This is article.

        This is article.

        This is article.

        This is article.

    

增改樣式如下：

article{
    background: #ffed53;
    width: 600px;
    float: left;
} 
article .inner{
    margin: 10px;
    border:2px solid red;
    padding: 20px;
}   

效果如下：

從結(jié)果可以看出，中間欄的寬度并未因此有多少變化，因?yàn)閮?nèi)容區(qū)減少的寬度抵消了應(yīng)用到內(nèi)部 div 上的外邊距、邊框和內(nèi)邊距的總寬度。于是，我們可以這樣結(jié)論：如果布局中的欄是浮動(dòng)的，而且都設(shè)定了寬度，你就不要去動(dòng)它！要?jiǎng)樱桶褍?nèi)容放在內(nèi)部 div 里，動(dòng)這個(gè) div。

這是最簡單的一個(gè)方法。只要在三個(gè)浮動(dòng)的欄的 CSS 規(guī)則中分別 加上 box-sizing:border-box 聲明，再給欄添加內(nèi)邊距（和邊框）就不會導(dǎo)致盒子的寬度變化。此時(shí)，既不用調(diào)整欄寬去抵消增加的內(nèi)邊距，也不用使用內(nèi)部 div。添加內(nèi)邊距的結(jié)果就是內(nèi)容收縮。

示例：

以下是簡介清晰的沒有內(nèi)部 div 的標(biāo)記：

相應(yīng)的，CSS 規(guī)則如下：

* { 
    margin: 0; 
    padding: 0;
}
#wrapper{
    width: 960px;
    margin: 0 auto;
    border:1px solid;
}
header{
    background: #f00;
}
nav{
    box-sizing:border-box;    /* 這里！ */
    background: #dcd9c0;
    width: 150px;
    float:left;
    padding: 10px 20px;       /* 添加內(nèi)邊距 */
}
article{
    box-sizing:border-box;    /* 這里！ */
    background: #ffed53;
    width: 600px;
    float: left;
    padding: 10px 20px;       /* 添加內(nèi)邊距 */
}
aside{
    box-sizing:border-box;    /* 還有這里?。?*/
    background: #6a6b6c;
    width: 210px;
    float: left;
    padding: 10px 20px;        /* 添加內(nèi)邊距 */
}
footer{
    clear:both;     /* 清除浮動(dòng)，防止頁腳往上移動(dòng) */     
    background: #6a6b6c;
}

結(jié)果如下：

box-sizing:border-box 確實(shí)起作用了。

當(dāng)我們?nèi)∠催x該屬性時(shí)，footer 欄就會由于 article欄的推擠產(chǎn)生了浮動(dòng)滑移，移位到 nav欄下方。

多么好用的一個(gè)屬性啊！當(dāng)然也就少不了 但是 —— IE6 和 IE7 不支持該屬性。

廢話少說，解決方案 如下：

使用一個(gè)專門解決這個(gè)問題的膩?zhàn)幽_本（polyfill），名叫 borderBoxModel.js.
可以使用 條件注釋 把它添加到 HTML 標(biāo)記之后、結(jié)束的 標(biāo)簽之前，以保證在加載 DOM 之后再執(zhí)行該腳本：

備忘：【關(guān)于表現(xiàn)性標(biāo)記的思考】、【子-星選擇符】、【預(yù)防過大的元素】。

參考資料

CSS設(shè)計(jì)指南