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

重學(xué)前端是程劭非（winter）【前手機淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(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折疊問題記錄

2、塊級格式上下文Block Formatting Context（簡稱 BFC）

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

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

float 屬性取值不是 none

overflow 屬性取值不是 visible

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

position 的值不為 static 或 relative 中的任何一個

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

可以用https://codepen.io/pen/測試：

     
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;
}

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

可以看出 box1 距離 body 上邊 20px，而 box2 和 box3 之間距離 40px，就是因為發(fā)生了折疊。body就是一個BFC，里面元素會發(fā)生margin折疊。

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

     
box1
     

          
box2
     
     

          
box3
     

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

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

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

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

formatting context + boxes/charater = positions

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

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

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

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

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

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

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

1、采用百分比寬度解決

    

    

    


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

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

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

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

4、在某些瀏覽器中，因為像素計算精度問題，還是會出現(xiàn)換行

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

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

/* 解決方案：給最后一個 div 加上一個負(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)寬（一個元素固定寬度，另一個元素填滿父容器剩余寬度）是個經(jīng)典的布局問題。

1、如何使用正常流來解決？

.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;
}

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

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

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