本文我們主要和大家分享關於CSS中重要的BFC詳解,CSS中有個重要的概念BFC,搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。
在解釋BFC之前,先說一下文件流程。我們常說的文檔流其實分為定位流、浮動流、普通流三種。而普通流其實就是指BFC中的FC。 FC(Formatting Context),直譯過來是格式化上下文,它是頁面中的一塊渲染區域,有一套渲染規則,決定了其子元素如何佈局,以及和其他元素之間的關係和作用。常見的FC有BFC、IFC,還有GFC和FFC。
BFC(Block Formatting Context)區塊層級格式化上下文,是用於佈局區塊層級盒子的一塊渲染區域,或者說是在一定條件下的一種渲染規則。
MDN上的解釋:BFC是Web頁面的可視化CSS渲染的部分,是區塊級盒子佈局發生的區域,也是浮動元素與其他元素互動的區域。
根元素,即HTML標籤
float的值不為none,為left
、right
overflow值不為visible,為auto
、scroll
、hidden
display值為inline-block
、table-cell
、table-caption
# 、flex
、inline-flex
、grid
、inline-grid
absolute、
fixed
注意:display:table也可以產生BFC的原因在於Table會預設生成一個匿名的table-cell,是這個匿名的table-ccell產生了BFC。
3. 約束規則瀏覽器對BFC區域的約束規則:查看DEMO
查看DEMO
這裡給任一個相鄰塊級盒子的外麵包一個p,透過改變此p的屬性使兩個原盒子分屬於兩個不同的BFC,以此來阻止margin重疊。
但這裡有個疑問:如果外麵包一層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詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!