摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎(chǔ)上，有相關(guān)規(guī)則，使得一些盒占據(jù)了正常流需要的空間，可以把理解為文字環(huán)繞。

重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語(yǔ)音】，如有侵權(quán)請(qǐng)聯(lián)系我，郵箱：kaimo313@foxmail.com。

正常流的排版行為：依次排列，排不下了換行。

在正常流基礎(chǔ)上，有 float 相關(guān)規(guī)則，使得一些盒占據(jù)了正常流需要的空間，可以把 float 理解為文字環(huán)繞。

有 vertical-align 相關(guān)規(guī)則規(guī)定了如何在垂直方向?qū)R盒。基線、文字頂 / 底、行頂 / 底等概念。

1、參考文章：CSS中margin折疊問(wèn)題記錄

2、塊級(jí)格式上下文Block Formatting Context（簡(jiǎn)稱 BFC）

Web頁(yè)面的一種布局方式，通俗點(diǎn)說(shuō)，也是指頁(yè)面上一個(gè)渲染區(qū)域，里面的元素按文檔流中的順序垂直排列，并且發(fā)生垂直方向上的 margin折疊，同時(shí)這個(gè)區(qū)域內(nèi)的元素布局不會(huì)對(duì)外面的元素有任何影響。

3、產(chǎn)生一個(gè)BFC：當(dāng)元素滿足一下任何一個(gè)條件

float 屬性取值不是 none

overflow 屬性取值不是 visible

display 的值為 table-cell, table-caption, inline-block 中的任何一個(gè)

position 的值不為 static 或 relative 中的任何一個(gè)

4、BFC 內(nèi)部垂直方向上的 margin折疊

可以用https://codepen.io/pen/測(cè)試：

     
box1
     
box2
     
box3

*{
     margin: 0;
     padding: 0;
}
#father{
     width: 2000px;
     height: 400px;
     background: #0016d9;
}
#first-child{
     margin-top: 20px;
     background: chocolate;
     width: 60px;
     height: 60px;
}
#second-child{
     background: chartreuse;
     width: 60px;
     height: 60px;
     margin-bottom: 20px;
}
#three-child{
     margin-top:40px;
     background: fuchsia;
     width: 60px;
     height: 60px;
}

這段代碼渲染出來(lái)的結(jié)果：

可以看出 box1 距離 body 上邊 20px，而 box2 和 box3 之間距離 40px，就是因?yàn)榘l(fā)生了折疊。body就是一個(gè)BFC，里面元素會(huì)發(fā)生margin折疊。

5、折疊現(xiàn)象去除

     
box1
     

          
box2
     
     

          
box3
     

/*  添加overflow: hidden; */
#father{
     overflow: hidden;
}

這樣就可以得到我們想要的效果：

在 CSS 標(biāo)準(zhǔn)中，規(guī)定了如何排布每一個(gè)文字或者盒的算法，這個(gè)算法依賴一個(gè)排版的當(dāng)前狀態(tài)，CSS 把這個(gè)當(dāng)前狀態(tài)稱為格式化上下文（formatting context）。

格式化上下文 + 盒 / 文字 = 位置

formatting context + boxes/charater = positions

排版需要分別為它們規(guī)定了塊級(jí)格式化上下文和行內(nèi)級(jí)格式化上下文。

1、塊級(jí)格式化上下文順次排列元素：

2、行內(nèi)級(jí)格式化上下文順次排列元素：

3、正常流中的一個(gè)盒或者文字排版，需要分成三種情況處理

當(dāng)遇到塊級(jí)盒：排入塊級(jí)格式化上下文。

當(dāng)遇到行內(nèi)級(jí)盒或者文字：首先嘗試排入行內(nèi)級(jí)格式化上下文，如果排不下，那么創(chuàng)建一個(gè)行盒，先將行盒排版（行盒是塊級(jí)，所以到第一種情況），行盒會(huì)創(chuàng)建一個(gè)行內(nèi)級(jí)格式化上下文。

遇到 float 盒：把盒的頂部跟當(dāng)前行內(nèi)級(jí)上下文上邊緣對(duì)齊，然后根據(jù) float 的方向把盒的對(duì)應(yīng)邊緣對(duì)到塊級(jí)格式化上下文的邊緣，之后重排當(dāng)前行盒。

1、采用百分比寬度解決

    

    

    


.inner {
    width:33.33%;
    height:300px;
    display:inline-block;
    outline:solid 1px blue;
}

2、上面 1 的代碼每個(gè) div 并非緊挨，中間有空白，因?yàn)闉榱舜a格式加入的換行和空格被 HTML 當(dāng)作空格文本，跟 inline 盒混排了的緣故。

3、上面 2 的做法影響代碼可讀性

/* 解決方案：設(shè)置 outer 中的字號(hào)為 0 */
.inner {
    width:33.33%;
    height:300px;
    display:inline-block;
    outline:solid 1px blue;
    font-size:30px;
}
.outer {
    font-size:0;
}

4、在某些瀏覽器中，因?yàn)橄袼赜?jì)算精度問(wèn)題，還是會(huì)出現(xiàn)換行

/*  解決方案：給 outer 添加一個(gè)特定寬度 */
.inner {
    width:33.33%;
    height:300px;
    display:inline-block;
    outline:solid 1px blue;
}
.outer {
    width:101px
}

5、這個(gè)代碼在某些舊版本瀏覽器中會(huì)出現(xiàn)換行

/* 解決方案：給最后一個(gè) div 加上一個(gè)負(fù)的右 margin */
.outer {
    width:101px
}

.inner {
    width:33.33%;
    height:300px;
    display:inline-block;
    outline:solid 1px blue;
}

.inner:last-child {
    margin-right:-5px;
}

自適應(yīng)寬（一個(gè)元素固定寬度，另一個(gè)元素填滿父容器剩余寬度）是個(gè)經(jīng)典的布局問(wèn)題。

1、如何使用正常流來(lái)解決？

.fixed {
    width:200px;
}
.fixed, .auto {
    height:300px;
    outline:solid 1px blue;
}

2、利用負(fù) margin

.fixed {
    display:inline-block;
    vertical-align:top;
}
.auto {
    margin-left:-200px;
    width:100%;
    display:inline-block;
    vertical-align:top;
}

這樣做會(huì)導(dǎo)致 auto 中的內(nèi)容位置不對(duì)，還需要使用 padding 把內(nèi)容擠出來(lái)，最終完整代碼如下：

.fixed {
    display:inline-block;
    vertical-align:top;
}
/* 給 auto 添加 padding-left 和 box-sizing 兩個(gè)屬性 */
.auto {
    margin-left:-200px;
    padding-left:200px;
    box-sizing:border-box;
    width:100%;
    display:inline-block;
    vertical-align:top;
}

好像BFC是前端面試題的常客。。。