BFC的形成條件和特性分析

初學(xué)CSS時，我們學(xué)到很多有意思的CSS規(guī)則，比如外邊距塌陷，還有浮動元素的一些特性等，其實(shí)這些規(guī)則背后都是BFC這個東西在控制，下面我們來看下BFC到底是什么。

什么是BFC

BFC（Block formatting contexts），翻譯過來就是塊級格式化上下文，指的是一種上下文環(huán)境，我們暫且不管它為什么叫這么晦澀冗長的名字，先看看哪些情況能形成BFC，然后看看它有哪些特性，這樣我們也就知道它是什么了。就像我們學(xué)習(xí)js的對象一樣，了解一個對象的原型，以及它的屬性方法，我們也就知道它是什么了。

如何形成BFC

根據(jù)W3C的定義：浮動元素，絕對定位元素，非塊級盒子的塊級容器（例如inline-blocks，table-cells，and table-captions），以及overflow屬性值不是“ visible”（visible是overflow的默認(rèn)值）的塊級盒子（視口除外），這些元素就會為他們的內(nèi)容創(chuàng)建一個BFC。

BFC的特點(diǎn)

在一個BFC中，垂直方向上，盒子是從包含塊頂部開始一個挨著一個布局的，兩個相鄰的盒子的垂直距離是由margin屬性決定的，在一個BFC中的兩個相鄰的塊級盒子的垂直外邊距會產(chǎn)生塌陷。
在一個BFC中，水平方向上，每個盒子的左邊緣都會接觸包含塊的左邊緣（從右向左的格式則相反）。除非出現(xiàn)浮動元素和其他元素相互作用的情況（當(dāng)有浮動元素時，行盒可能因浮動元素而收縮，如果有盒子形成了新的BFC，那這個盒子也可能因浮動元素而變窄）。
這樣我們終于知道為什么《精通CSS》里提到外邊距塌陷時，為什么設(shè)置這么多的條件了：

  1. 處于文檔流中的塊級元素
  2. 垂直外邊距直接相遇

其中第一個條件就是為了防止形成BFC，我們要注意的是BFC內(nèi)部的子元素之間可以形成外邊距塌陷，但BFC元素和其他塊級元素是不能形成外邊距塌陷的。

BFC的應(yīng)用

BFC的應(yīng)用場景比較多，在這里列一些我臨時想到的

  1. 清除元素之間的影響
    如果想讓一個元素不受另一個元素的影響，可以把其中一個元素放到BFC環(huán)境中。
    eg：我們都知道文本會圍繞著浮動元素布局，如下圖所示 

    <style type="text/css"> .out{ width: 200px; height: 200px; border: 1px solid blue;
    } .f