BFC的形成條件和特性分析

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

什么是BFC

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

如何形成BFC

根據(jù)W3C的定義：浮動(dòng)元素，絕對定位元素，非塊級(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)元素和其他元素相互作用的情況（新航道雅思培訓(xùn)當(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)用場景比較多，在這里列一些我臨時(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{        width: 50px;        height: 50px;        background: red;        float: left;
       }</style>

   <div class="out">
   <div class="f"></div>我是文本我是文本我是文本我是文本我是文本我是文本我是文本
   我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</div>

如果我們不想讓文本環(huán)繞，只想讓文本位于右側(cè)，怎么處理呢？
只需要在文本外套一層元素，并且把這個(gè)元素變成BFC，這樣文本就不會(huì)受到浮動(dòng)元素的影響了。我這里通過修改overflow屬性使文本所在元素形成一個(gè)BFC。

<style type="text/css">
        .out{            width: 200px;            height: 200px;            border: 1px solid blue;
        }        .f{            width: 50px;            height: 50px;            background: red;            float: left;
        }        .inner{            overflow: auto;
        }    </style>

<div class="out">
    <div class="f"></div><div class="inner">我是文本我是文本我是文本我是文本我是文本我是文本我是文本
我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</div></div>

防止塊級(jí)元素之間外邊距塌陷的方法之一就是利用剛才說的第一個(gè)條件，也是同樣的原理，形成一個(gè)BFC，在這里就不再說了。

1. 清除內(nèi)部浮動(dòng)元素對父級(jí)元素的影響
   eg：

   <style type="text/css">
       .out{        border: 1px solid blue;
       }    .f{        width: 50px;        height: 50px;        background: red;        float: left;
       }</style>

   <div class="out">
   <div class="f"></div>
   </div>

   效果圖：

如果想讓外部元素包含浮動(dòng)元素，只需將外部元素設(shè)置為BFC

<style type="text/css">
        .out{            overflow: auto;            border: 1px solid blue;
        }        .f{            width: 50px;            height: 50px;            background: red;            float: left;
        }    </style>

效果圖：

1. 創(chuàng)建自適應(yīng)布局
   如果我們想創(chuàng)建一個(gè)兩列布局，其中左側(cè)寬度不定，右側(cè)寬度自適應(yīng)占用剩下的空間，有一種方法就是利用浮動(dòng)元素和BFC元素的相互作用實(shí)現(xiàn)的。

   <style type="text/css">html,body{        width: 100%;        height: 100%;
   }    .out{        background: blue;        width: 100%;        height: 100%;
       }    .f{        float: left;        margin-right: 20px;        height: 100%;        background: red;
       }    .r{        overflow: auto;        height: 100%;        background: yellow;
       }</style>

   <div class="out">
   <div class="f">浮動(dòng)元素</div>
   <div class="r"></div>
   </div>

   效果圖：

總結(jié)

BFC是很多CSS規(guī)范背后的原理，所以有必要搞清楚BFC。