盒模型與BFC

盒子模型

在一個文檔中，每個元素都被抽象成一個盒子，每個盒子又包括四部分外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）構成。在盒模型中，存在標準盒模型、IE盒模型（怪異盒模型）。

---

標準盒模型

IE盒模型

在css中存在box-sizing屬性，默認屬性就是content-box，即標準盒子，設置border-box，即IE盒子模型。

這個屬性的存在應該是讓兩種盒子共存的意思吧。

BFC（塊及格式化上下文）

具備BFC特性的元素能夠看做是隔離的獨立容器，容器裏面的元素不會再佈局上影響到外面的元素，而且BFC具備普通容器所沒有的一些特性。

---

如何觸發 BFC

知足下面任條件均可以觸發BFC：<br>
  1. body根元素<br>
  2. 浮動元素：float 除 none之外的值<br>
  3. 絕對定位元素：position: absolute\fixed;<br>
  4. dislpay：inline-block\table-cells\flex;<br>
  5. overflow: hidden\auto\scroll;<br>
複製代碼

BFC 的特性

同一個 BFC 下邊距會發生塌陷： 上圖兩個div的下邊距與上邊距重合，兩個盒子之間的間距是100不是200。可是這不是BFC的BUG，能夠理解爲這是一種規範，若是要避免這種狀況，能夠二者都處於不一樣的BFC容器中：

.container {
    overflow: hidden;
}
div {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}

.container
  div
複製代碼

BFC 能夠包含浮動的元素（清除浮動）

浮動元素會脫離文流，因此會出現下圖問題，容器只剩下2px的邊距高度。若是觸發容器的BFC，那麼容器會包裹着浮動的元素。

BFC 能夠阻止元素被浮動元素覆蓋

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一個左浮動的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一個沒有設置浮動, 也沒有觸發 BFC 元素</div>
複製代碼

浮動元素會覆蓋元素而且形成文字環繞的效果，若是想要避免被覆蓋，能夠在第二個元素中加入 overflow:hidden來觸發BFC特性，觸發後的效果以下： 這個效果能夠實現兩列布局，左邊浮動元素的寬度固定，右邊的元素自適應。

總結 BFC 的佈局規則：
1. 內部的 Box 會在垂直方向排列（塊級元素）
2. Box 垂直方向上的邊距由margin決定，屬於同一個 BFC 的兩個相鄰的 Box 的margin會發生重合
3. 每一個盒子的左邊框緊挨着包含塊的左邊框，浮動元素也是如此
4. BFC 的區域不會於 Float Box 重疊
5. BFC 就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然
6. 計算 BFC 的高度時，浮動子元素也參與計算
複製代碼