一、何為BFC

塊級格式化上下文（Block Formatting Context）是網頁CSS視覺渲染的一部分，并用于決定盒子的布局。在定位體系中屬于常規流(Normal Flow)（另外兩種定位體系為浮動(Floats)和絕對定位(Absolute Positioning)）。

二、BFC如何形成

BFC的形成，根據W3C所言：

浮動、絕對定位元素（position 為 absolute 或 fixed）、行內塊元素 display:inline-block、表格單元格display:table-cell、表格標題 display:table-caption 以及 overflow 屬性值不為 visible 的元素（除了該值被傳播到視點 viewport 的情況）將創建一個新的塊級格式化上下文。

通俗理解的話，一個BFC元素至少滿足一下條件中的一個：

1.float的值不為none

2.position的值不為static或relative

3.display的值為table-cell、table-caption、inline-block、flex或inline-flex

4.overflow的值不為visiable

滿足以上條件的元素將有BFC元素的一些特性，理解并掌握這些特性可以讓你在CSS布局中更加得心應手，也可以從根源上理解一些常見代碼實現效果的原理，如清除浮動，自適應布局等。

三、BFC有什么特性

1.BFC中盒子對齊

W3C規范中寫到：

在BFC上下文中，每個盒子的左外側緊貼包含塊的左側（從右到左的格式里，則為盒子右外側緊貼包含塊右側），甚至有浮動也是如此（盡管盒子里的行盒子 Line Box 可能由于浮動而變窄），除非盒子創建了一個新的BFC（在這種情況下盒子本身可能由于浮動而變窄）。

如圖所示，所有BFC的盒子都會遵循左對齊的的對齊方式。

2.關于外邊距折疊

大家應該知道，標準文檔流的同胞元素在豎直方向上會發生外邊距折疊的現象，如下圖

A的下邊距為100px，B的上邊距為50px，發生外邊距折疊后A、B豎直間距為50xp。（更多外邊距折疊問題后面會有博客專題）

一個BFC盒子與它的子元素之間不會發生外邊距折疊。但是同一個BFC盒子內部的子元素之間也是會發生外邊距折疊的，如下圖：

可如果為其中一個子元素創建一個新的BFC（不同于父元素那個BFC盒子），讓這些子元素分屬于不同的BFC，他們之間就不會發生外邊距折疊了，如下圖：

HTML為：

<div class="container"><p>Sibling 1</p><p>Sibling 2</p><div class="newBFC"><p>Sibling 3</p></div> </div>

CSS為：

.container {background-color: red;overflow: hidden; /* creates a block formatting context */ } p {margin: 10px 0;background-color: lightgreen; } .newBFC {overflow: hidden; /* creates new block formatting context */ }

3.BFC內外元素互不影響

這條通俗來講就是：無論BFC內部元素如何布局——浮動、絕對定位或是其他，都不會對BFC盒子外的其他盒子的布局造成影響，同時，外部元素也不會影響BFC內部元素的布局。這個特性用途很廣，也解釋了為何BFC可以清除浮動了。

四、如何應用BFC

BFC的特性是很多CSS規范背后的原理，掌握這些特性，反過來應用它們就可以實現很多效果：

一、使用BFC避免外邊距折疊

BFC特性2中的實例就實現了這個特性的反向應用。

二、使用BFC清除浮動

由于特性3，我們只需要用BFC包含浮動塊就可以達到清除浮動影響的效果，也就是讓包含浮動的父元素BFC化，這就是好幾種清除浮動方法的根本原理：

1.設置父元素也浮動；

2.設置父元素的display為table(不常用)；

3.設置父元素overflow：hidden/auto；

都是讓父元素BFC化，來清除對BFC外元素的影響。（下一篇博客將總結各種清除浮動的方法）

三、使用BFC避免文字環繞效果

大部分時候我們并不需要浮動帶來的文字環繞效果（這個現象是由于特性1，詳細解釋可參考http://web.jobbole.com/83149/），用BFC來清除這個效果是個不錯的選擇。如下圖：

我們將文字部分的包含塊設置overflow：hidden就可以實現清除文環繞了。

四、多列布局與自適應布局

多列布局：

如果我們創建一個占滿整個容器寬度的多列布局，在某些瀏覽器中最后一列有時候會掉到下一行。這可能是因為瀏覽器四舍五入了列寬從而所有列的總寬度會超出容器。但如果我們在多列布局中的最后一列里創建一個新的BFC，它將總是占據其他列先占位完畢后剩下的空間。（對于多列布局這不一定是個好辦法，在實際應用中更推薦使用彈性盒子或者用最后一個盒子margin負值來解決。）

自適應布局：

類似應用三的例子中，如果設置右邊浮動元素margin-right（或左邊BFC元素margin-left）為一定值，就實現了左右兩列的自適應布局，無論左右兩部分width怎么變化，都可以保持很好的布局狀況而不會亂掉，這種情況下BFC的設置方法可以是：

1.overflow：auto/hidden;?? IE7+

2.display:inline-block;?? IE6/IE7

3.display:table-cell;???? IE8+

五、最后

本文參考了好幾篇博文，原文中關于用法或原理有更詳盡的解釋，下面貼出地址：

張鑫旭 CSS深入理解流體特性和BFC特性下多欄自適應布局

http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

理解CSS中的塊級格式化上下文

http://web.jobbole.com/83149/

還是那句話，感謝前人栽陰！

轉載于:https://www.cnblogs.com/adventureofraindrop/p/6123264.html

總結

以上是生活随笔為你收集整理的CSS中块级格式化上下文（BFC）的特性与应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。