BFC的形成條件和特性分析

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

什么是BFC

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

如何形成BFC

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

BFC的特點(diǎn)

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

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

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

BFC的應(yīng)用

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

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

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