CSS中重要的BFC

plus2047 發布于2019-08-29 14:20 / 3027人閱讀

摘要：中有個重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實分為定位流浮動流普通流三種。使用包含浮動元素注意，這里觸發并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。

CSS中有個重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。

1. 簡介

在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為定位流、浮動流、普通流三種。而普通流其實就是指BFC中的FC。FC(Formatting Context)，直譯過來是格式化上下文，它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何布局，以及和其他元素之間的關系和作用。常見的FC有BFC、IFC，還有GFC和FFC。

BFC(Block Formatting Context)塊級格式化上下文，是用于布局塊級盒子的一塊渲染區域。MDN上的解釋：BFC是Web頁面 CSS 視覺渲染的一部分，用于決定塊盒子的布局及浮動相互影響范圍的一個區域。

注意：一個BFC的范圍包含創建該上下文元素的所有子元素，但不包括創建了新BFC的子元素的內部元素。這從另一方角度說明，一個元素不能同時存在于兩個BFC中。因為如果一個元素能夠同時處于兩個BFC中，那么就意味著這個元素能與兩個BFC中的元素發生作用，就違反了BFC的隔離作用。

2. 三種文檔流的定位方案

常規流(Normal flow)

在常規流中，盒一個接著一個排列;

在塊級格式化上下文里面，它們豎著排列；

在行內格式化上下文里面，它們橫著排列;

當position為static或relative，并且float為none時會觸發常規流；

對于靜態定位(static positioning)，position: static，盒的位置是常規流布局里的位置；

對于相對定位(relative positioning)，position: relative，盒偏移位置由top、bottom、left、right屬性定義。即使有偏移，仍然保留原有的位置，其它常規流不能占用這個位置。

浮動(Floats)

左浮動元素盡量靠左、靠上，右浮動同理

這導致常規流環繞在它的周邊，除非設置 clear 屬性

浮動元素不會影響塊級元素的布局

但浮動元素會影響行內元素的布局，讓其圍繞在自己周圍，撐大父級元素，從而間接影響塊級元素布局

最高點不會超過當前行的最高點、它前面的浮動元素的最高點

不超過它的包含塊，除非元素本身已經比包含塊更寬

行內元素出現在左浮動元素的右邊和右浮動元素的左邊，左浮動元素的左邊和右浮動元素的右邊是不會擺放浮動元素的

絕對定位(Absolute positioning)

絕對定位方案，盒從常規流中被移除，不影響常規流的布局；

它的定位相對于它的包含塊，相關CSS屬性：top、bottom、left、right；

如果元素的屬性position為absolute或fixed，它是絕對定位元素；

對于position: absolute，元素定位將相對于上級元素中最近的一個relative、fixed、absolute，如果沒有則相對于body；

3. BFC觸發方式

根元素，即HTML標簽

浮動元素：float值為left、right

overflow值不為 visible，為 auto、scroll、hidden

display值為 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid

定位元素：position值為 absolute、fixed

注意：display:table也可以生成BFC的原因在于Table會默認生成一個匿名的table-cell，是這個匿名的table-cell生成了BFC。

4. 約束規則

瀏覽器對BFC區域的約束規則：

生成BFC元素的子元素會一個接一個的放置。

垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰子元素之間的垂直距離取決于元素的margin特性。在BFC中相鄰的塊級元素的外邊距會折疊(Mastering margin collapsing)。

生成BFC元素的子元素中，每一個子元素左外邊距與包含塊的左邊界相接觸（對于從右到左的格式化，右外邊距接觸右邊界），即使浮動元素也是如此（盡管子元素的內容區域會由于浮動而壓縮），除非這個子元素也創建了一個新的BFC（如它自身也是一個浮動元素）。

規則解讀：

內部的Box會在垂直方向上一個接一個的放置

內部的Box垂直方向上的距離由margin決定。（完整的說法是：屬于同一個BFC的兩個相鄰Box的margin會發生折疊，不同BFC不會發生折疊。）

每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）

BFC的區域不會與float的元素區域重疊

計算BFC的高度時，浮動子元素也參與計算

5. 作用

BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面元素，反之亦然。我們可以利用BFC的這個特性來做很多事。

5.1 阻止元素被浮動元素覆蓋

一個正常文檔流的block元素可能被一個float元素覆蓋，擠占正常文檔流，因此可以設置一個元素的float、display、position值等方式觸發BFC，以阻止被浮動盒子覆蓋。

使用BFC阻止元素被浮動元素覆蓋

5.2 可以包含浮動元素

通過改變包含浮動子元素的父盒子的屬性值，觸發BFC，以此來包含子元素的浮動盒子。

使用BFC包含浮動元素

注意，這里觸發BFC并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。

BFC內部其他形式脫離文檔流(absolute fixed)

5.3 阻止因為瀏覽器因為四舍五入造成的多列布局換行的情況

有時候因為多列布局采用小數點位的width導致因為瀏覽器因為四舍五入造成的換行的情況，可以在最后一列觸發BFC的形式來阻止換行的發生。比如下面栗子的特殊情況

使用BFC阻止多列布局最后一列換行

5.4 阻止相鄰元素的margin合并

屬于同一個BFC的兩個相鄰塊級子元素的上下margin會發生重疊，(設置writing-mode:tb-rl時，水平margin會發生重疊)。所以當兩個相鄰塊級子元素分屬于不同的BFC時可以阻止margin重疊。
這里給任一個相鄰塊級盒子的外面包一個div，通過改變此div的屬性使兩個原盒子分屬于兩個不同的BFC，以此來阻止margin重疊。

使用BFC阻止margin合并

但是這里有個疑問：
如果外面包一層div，設置能觸發BFC的任何屬性都能阻止相鄰元素的margin合并。因為分屬不同BFC不會發生margin合并。
而如果在外面不包一個div的話，當設置display為inline-block、inline-flex、table-captain，和position為absolute、fixed，float為left、right是可以阻止margin合并的。這里問題來了：

我們知道設置position和float會讓元素脫離文檔流并且又創建新的BFC，所以兩個元素就不是相鄰元素了，因此可以阻止相鄰元素margin合并，但是inline-block、inline-flex、inline-grid、table-captain為什么可以呢？如果有人知道為什么，請告知~

網上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~

參考：

我對BFC的理解

深入理解BFC和Margin Collapse

深入理解BFC

Understanding Block Formatting Contexts in CSS

學習BFC

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～

云服務器 GPU云服務器 linux中重要的數據結構 php中css的用法 css中 bfc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113057.html

校招進行時（四）---css基礎

摘要：在中，使用標準盒模型描述這些矩形盒子中的每一個。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。最常見的有簡稱和簡稱。其中列是真正顯示文檔內容的元素。同時其還支持列的偏移，即可以不從第一列開始，將某幾列作為空隙。恩，小菜鳥又來了，上篇文章在這，話不多說，這次羅列總結一下css基礎知識，和我一樣的菜鳥可以看看。引入方式 css的引入方式主要有以下幾種：外...

isLishude 2019-08-29 12:59 評論0 收藏0
深入css布局 (3)完結 — margin問題與格式化上下文

? 深入css布局(3) — margin問題與格式化上下文 ? ???? 在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們來深入學習一下css布局相關的知識。 ? css布局篇已經講個2篇了，前面我們深入講解了盒模型與box-sizing, 元素分類，行框，定位與浮動等知識點。今天呢，我們把css布局篇做一個結尾，最后...

blankyao 2019-04-23 13:42 評論0 收藏0
關于CSS里BFC特性的理解和應用

摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規則。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規范中的一個概念...

shixinzhang 2019-08-29 16:34 評論0 收藏0
關于CSS里BFC特性的理解和應用

摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規則。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規范中的一個概念...

vspiders 2019-08-02 11:24 評論0 收藏0
CSS8:到底什么是BFC？

摘要：兩個兄弟盒之間的豎直距離由屬性決定。即使存在浮動盡管一個盒的行盒可能會因為浮動收縮，這也成立。它是塊級盒布局出現的區域，也是浮動層元素進行交互的區域。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。現在有flex布局等新技術，bfc的效果比如包住元素，進行自適應布局等已經不需要了。現在只有免式的事后才需要知道BFC！看不懂的定義 CSS規范中對 BFC 的描述 9....

wyk1184 2019-08-29 17:08 評論0 收藏0