引言：
一、何為bfc
bfc（block formatting context）格式化上下文，是web頁面中盒模型布局的css渲染模式，指乙個獨立的渲染區域或者說是乙個隔離的獨立容器。
二、形成bfc的條件
1、浮動元素，float 除 none 以外的值；
2、定位元素，position（absolute，fixed）；
3、display 為以下其中之一的值 inline-block，table-cell，table-caption；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）；
三、bfc的特性
1.內部的box會在垂直方向上乙個接乙個的放置。
2.垂直方向上的距離由margin決定
3.bfc的區域不會與float的元素區域重疊。
4.計算bfc的高度時，浮動元素也參與計算
5.bfc就是頁面上的乙個獨立容器，容器裡面的子元素不會影響外面元素。
看到這裡是不是有丈二和尚摸不著頭腦的感覺，下面我就用案例來幫助理解認識：
四、實踐是檢驗真理的唯一標準
特性的第二條：垂直方向上的距離由margin決定
在常規文件流中，兩個兄弟盒子之間的垂直距離是由他們的外邊距所決定的，但不是他們的兩個外邊距之和，而是以較大的為準。
.container .box1 .box2這裡我門可以看到，第乙個子盒子有上邊距（不會發生margin穿透的問題）；兩個子盒子的垂直距離為20px而不是30px，因為垂直外邊距會摺疊，間距以較大的為準。
那麼有沒有方法讓垂直外邊距不摺疊呢？答案是：有。特性的第5條就說了：bfc就是頁面上的乙個獨立容器，容器裡面的子元素不會影響外面元素，同樣外面的元素不會影響到bfc內的元素。所以就讓box1或box2再處於另乙個bfc中就行了。
.container .box1 .box2（3）不被浮動元素覆蓋以常見的兩欄布局為例。
左邊固定寬度，右邊不設寬，因此右邊的寬度自適應，隨瀏覽器視窗大小的變化而變化。
.column:nth-of-type(1) .column:nth-of-type(2)還有三欄布局。
左右兩邊固定寬度，中間不設寬，因此中間的寬度自適應，隨瀏覽器的大小變化而變化。
html：
<css：div
class
="contain"
>
<
div
class
="column"
>
div>
<
div
class
="column"
>
div>
<
div
class
="column"
>
div>
div>
.column:nth-of-type(1),也可以用來防止字型環繞：.column:nth-of-type(2) .column:nth-of-type(2) .column:nth-of-type(3)
眾所周知，浮動的盒子會遮蓋下面的盒子，但是下面盒子裡的文字是不會被遮蓋的，文字反而還會環繞浮動的盒子。這也是乙個比較有趣的特性。
p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
p>
css：
（1）環繞
.left p（2）利用bfc防止環繞
.left p（4）bfc包含浮動的塊總結
CSS中的BFC詳解
一 何為bfc bfc block formatting context 格式化上下文，是web頁面中盒模型布局的css渲染模式，指乙個獨立的渲染區域或者說是乙個隔離的獨立容器。二 形成bfc的條件 1 浮動元素 float除none以外的值。2 定位元素 position absoluted,fi...
CSS中的BFC解析
bfc 即塊級格式上下文 block formatting context 它是指乙個獨立的塊級渲染區域，只有block level的box參與，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。css2.1規定滿足一下條件之一就會生成bfc 根元素float的值不為none overf...
CSS中重要的BFC
css中有個重要的概念bfc，搞懂bfc可以讓我們理解css中某些原本看似詭異的地方。在解釋bfc之前，先說一下文件流。我們常說的文件流其實分為定位流 浮動流 普通流三種。而普通流其實就是指bfc中的fc。fc formatting context 直譯過來是格式化上下文，它是頁面中的一塊渲染區域，...