首頁  >  文章  >  web前端  >  關於CSS中重要的BFC詳解

關於CSS中重要的BFC詳解

小云云
小云云原創
2018-01-29 11:06:051892瀏覽

本文我們主要和大家分享關於CSS中重要的BFC詳解,CSS中有個重要的概念BFC,搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。

1. 簡介

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

BFC(Block Formatting Context)區塊層級格式化上下文,是用於佈局區塊層級盒子的一塊渲染區域,或者說是在一定條件下的一種渲染規則。

MDN上的解釋:BFC是Web頁面的可視化CSS渲染的部分,是區塊級盒子佈局發生的區域,也是浮動元素與其他元素互動的區域。

2. BFC觸發方式

  1. 根元素,即HTML標籤

  2. float的值不為none,為leftright

  3. overflow值不為visible,為autoscrollhidden

  4. display值為inline-blocktable-celltable-caption# 、flexinline-flexgridinline-grid

  5. ##position值為

    absolutefixed

注意:display:table也可以產生BFC的原因在於Table會預設生成一個匿名的table-cell,是這個匿名的table-ccell產生了BFC。

3. 約束規則

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

  1. 產生BFC元素的子元素會一個接一個的放置。垂直方向上他們的起點是一個包含區塊的頂部,兩個相鄰子元素之間的垂直距離取決於元素的margin特性。在BFC中相鄰的區塊級元素的外邊距會折疊(Mastering margin collapsing)。

  2. 產生BFC元素的子元素中,每個子元素左外邊距與包含區塊的左邊界相接觸(對於從右到左的格式化,右外邊距接觸右邊界),即使浮動元素也是如此(儘管子元素的內容區域會由於浮動而壓縮),除非這個子元素也創建了一個新的BFC(如它本身也是一個浮動元素)。

規則解讀:

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

  2. #內部的Box垂直方向上的距離由margin決定。 (完整的說法是:屬於同一個BFC的兩個相鄰Box的margin會發生折疊,不同BFC不會發生折疊。)

  3. 每個元素的左外邊距與包含塊的左邊界相接觸(從左向右),即使浮動元素也是如此。 (這表示BFC中子元素不會超出他的包含塊,而position為absolute的元素可以超出他的包含塊邊界)

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

  5. 計算BFC的高度時,浮動子元素也參與計算

#4. 作用

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

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

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

查看DEMO

4.2 可以包含浮動元素

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

查看DEMO

4.3 阻止相鄰元素的margin合併

屬於同一個BFC的兩個相鄰區塊級子元素的上下margin會發生重疊,(設定writing-mode :tb-rl時,水平margin會發生重疊)。所以當兩個相鄰區塊級子元素分屬於不同的BFC時可以阻止margin重疊。

這裡給任一個相鄰塊級盒子的外麵包一個p,透過改變此p的屬性使兩個原盒子分屬於兩個不同的BFC,以此來阻止margin重疊。

查看DEMO

但這裡有個疑問:如果外麵包一層p,設定能觸發BFC的任何屬性都能阻止相鄰元素的margin合併。因為分屬不同BFC不會發生margin合併。
而如果外面不包一個p的話,當設定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為什麼可以呢?如果有人知道為什麼,請告知~

相關推薦:

CSS中潛藏著的BFC

##什麼是BFC?對bfc的簡單理解

浮動的定義與浮動的清除(BFC)


以上是關於CSS中重要的BFC詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn