深刻理解盒模型與BFC

標準盒模型與IE盒模型

開發者們都知道，因爲歷史遺留問題與既定標準的發展，存在着兩個css盒模型。即W3C的標準盒模型以及IE的怪異盒模型。在css中，能夠用box-sizing去定義元素的盒模型。

比較這兩個盒模型的差別以前，咱們先來看一張圖：

先不討論寬高，咱們把一個元素的組成分爲：content、padding、border、margin。

標準盒模型（box-sizing: content-box），即W3C標準中默認的盒模型。它規定，一個元素的寬高並不包含padding和border，那麼它在渲染時的寬高計算公式以下：

width = content width;
height = content height;

IE盒模型（box-sizing: border-box），則偏偏相反，它的寬高其實是包含padding和border的，因此

width = content width + padding + border;
height = content height + padding + border;

如圖，demo地址請點擊

至此，兩種盒模型的區別應該挺明白的了吧。接下來咱們講講有關BFC的東西。

什麼是BFC

BFC，即 Block Formatting Context 直譯爲 「塊級格式化上下文」。MDN上的定義爲：

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with other elements.

其是Web頁面的可視化CSS渲染的一部分，是佈局過程當中生成塊級盒子的區域，也是浮動元素與其餘元素的交互限定區域

深刻了解 BFC 以前，咱們看看，什麼是 「外邊距重疊」。

外邊距重疊（Collapsing margins），指的是毗鄰的兩個或多個外邊距 (包括父子元素) 會合併成一個外邊距。其中所說的 margin 毗鄰，能夠歸結爲如下兩點：

1. 這兩個或多個外邊距沒有被非空內容、padding、border 或 clear 分隔開。
2. 這些 margin 都處於普通流中。

BFC原理

• 浮動定位和清除浮動時只會應用於同一個BFC內的元素
• 浮動不會影響其它BFC中元素的佈局，而清除浮動只能清除同一BFC中在它前面的元素的浮動
• 外邊距摺疊也只會發生在屬於同一BFC的塊級元素之間

所以，咱們經常經過創建BFC來防止外邊距重疊的發生。

創建BFC

經過如下方式可使元素成爲一個BFC：

• 浮動（float的值不爲none）
• 絕對定位元素（position的值爲absolute或fixed）
• 行內塊（display爲inline-block）
• 表格單元（display爲table、table-cell、table-caption等HTML表格相關屬性）
• 彈性盒（display爲flex或inline-flex）
• overflow不爲visible

BFC其餘應用場景

一、因爲BFC在計算高度時，其所包含的全部元素，包括浮動元素都是參與計算的。因此甚至可使用BFC來達到清除浮動的效果。

建立BFC以後：

二、因爲BFC與float元素是不會發生重疊的，根據這個特性，能夠作到自適應兩欄佈局。因爲左邊元素浮動，形成右邊元素的背景沾滿了整個容器。

將右邊元素改爲BFC以後：

BFC相關demo請點擊

參考：

• http://www.javashuo.com/article/p-xbtysism-cw.html
• http://w3help.org/zh-cn/kb/006/
• MDN：BFC
• MDN：Mastering margin collapsing

關於我

微信號：rcgrcg，歡迎交友～

爲了生計，我也接外包項目的哦～

網站搭建（PC、H五、先後端全包，咱們有團隊的哦），APP開發（安卓和IOS），都是有成功案例的哦。

有興趣的請聯繫我！！服務包您滿意的那種！！

Good luck！2018-11-13 廈門