闡述一下盒子模型以及它有什麼特殊的應用，BFC是什麼？
這是一道大廠百分百會考的題目，畢竟css的知識點多而雜，就盒子模型比較系統一點，适合當考題。
盒子模型
- 所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
- CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際内容。
- 盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
Box Model 是 CSS 布局的對象和基本機關，頁面就是由這一個個盒子所構成的。
屬性與特點
- 盒子實際寬度（高度） = 内容（content）+ 邊框（border）+ 間隙（padding）+ 間隔（margin）。
- 外邊距（margin）折疊 ：在正常流布局時，盒子都是垂直排列（在未改變div的屬性前都是占一行的），兩者之間的間距由各自的外邊距所決定（一般取最大），但不是二者外邊距之和。
- 浏覽器的相容性問題 ： 根據 W3C 的規範，元素内容占據的空間是由 width 屬性設定的，而内容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非标準模型。這些浏覽器的 width 屬性不是内容的寬度，而是内容、内邊距和邊框的寬度的總和。 （同時IE8 及更早IE版本不支援設定填充的寬度和邊框的寬度屬性。解決IE8及更早版本不相容問題可以在HTML頁面聲明 <!DOCTYPE html>即可。）
根據上面的提到的屬性跟特點，我們會引發兩個問題： 1. 當我們為盒子設定width的時候（排除IE），實際上盒子的大小并不是你預想設定的那樣，因為還要加上margin，padding，border，這樣我們設計寬度的時候就有些麻煩了。 2. 當兩個盒子的都設定了 margin:10px; 就會出現下面的情況，兩個盒子中間隻有 10px 而不是 20px 。
我們先看第一個問題，為了友善我們設計盒子的寬度 W3C 為了我們提供了： box-sizing 的屬性。
也就是說當我們設定盒子樣式為：
box-sizing: border-box
時就可以解決這一問題，細心的你不知道有沒有發現，這裡還是沒有把外邊距（margin）包含在裡面，這裡是有兩點原因： 1. margin在W3C定義為透明的背景邊框； 2. 它不适合做其他調整，不符合其身份定義；
對于第二問題，這就要引入大名鼎鼎的BFC了。
BFC
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的内容建立新的 BFC ，塊級格式化上下文 (Block Fromatting Context)。 BFC 是一個獨立的布局環境，其中的元素布局是不受外界的影響，并且在一個BFC中，塊盒與行盒（行盒由一行中所有的内聯元素所組成）都會垂直的沿着其父元素的邊框排列。
根據自身的需要确定如何建立BFC環境，那我們試着解決第二個問題。
// 産生外邊距折疊的dom結構
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
</div>
// 産生外邊距折疊的css
.container {
background-color: red;
}
p {
background-color: lightgreen;
margin: 10px 0;
}
隻要我們為 Sibling 2 建立BFC就可以解決這個問題了，下面上代碼
<div class="container">
<p>Sibling 1</p>
<div class="newBFC">
<p>Sibling 2</p>
</div>
</div>
.container {
background-color: red;
}
p {
margin: 10px 0;
background-color: lightgreen;
}
.newBFC {
overflow: hidden;
}
拓展
BFC 除了解決外邊距折疊外還有什麼作用呢？相信大家都遇到過這樣的情況，當父元素沒有設定高度，裡面的子元素為絕對定位即脫離文檔流時，父元素将不會被撐開。
<div class="container">
<div>Sibling</div>
<div>Sibling</div>
</div>
.container {
/* 放開下面代碼後，形成BFC解決問題 */
/* overflow: hidden; */
background-color: green;
}
.container div {
float: left;
background-color: lightgreen;
margin: 10px;
}
以上就為盒子模型的全部，感謝這篇部落格的資料提供《什麼是BFC》。
關注文集以便檢視更多前端面試知識。
前端面試總結zhuanlan.zhihu.com