(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染地區,只有Block-level box參與, 它規定了內部的Block-level Box如何布局,並且與這個地區外部毫不相干。那麼,如何來建立塊級格式化上下文以及格式化內容相關的作用是什嗎?接下來的這篇文章給大家分享一下關於塊級格式化內容相關的內容。
我們常說的文檔流其實分為==定位流、浮動流和普通流==三種。而普通流其實就是指BFC中的FC。
FC是formatting context的首字母縮寫,直譯過來是格式化上下文,它是頁面中的一塊渲染地區,有一套渲染規則,決定了其子項目如何布局,以及和其他元素之間的關係和作用。
通俗一點的方式解釋:
BFC 可以簡單的理解為某個元素的一個 CSS 屬性,只不過這個屬性不能被開發人員顯式的修改,擁有這個屬性的元素對內部元素和外部元素會表現出一些特性,這就是BFC。
BFC的觸發條件即建立塊級格式化內容相關的的條件:
==滿足下列條件之一就可觸發BFC==
【1】根項目,即HTML元素
【2】float的值不為none
【3】overflow的值不為visible
【4】display的值為inline-block、table-cell、table-caption
【5】position的值為absolute或fixed
建立格式化上下文(BFC)的規則:
1.內部的Box會在垂直方向,一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3.每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,否則相反)。即使存在浮動也是如此。
4.BFC的地區不會與float box重疊。
5.BFC就是頁面上的一個隔離的獨立容器,容器裡面的子項目不會影響到外面的元素。反之也如此。
6.計算BFC的高度時,浮動元素也參與計算
BFC布局規則1:內部的Box會在垂直方向,一個接一個地放置。
我們平常說的盒子是由margin、border、padding、content組成的,實際上每種類型的四條邊定義了一個盒子,分別是分別是content box、padding box、border box、margin box,這四種類型的盒子一直存在,即使他們的值為0.決定塊盒在包含塊中與相鄰塊盒的垂直間距的便是margin-box。
BFC布局規則2:Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
決定塊盒在包含塊中與相鄰塊盒的垂直間距的便是margin-box
BFC布局規則3:每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,否則相反)。即使存在浮動也是如此。
<div class="parent"> <div class="child"></div> //給這兩個子div加浮動,浮動的結果,如果沒有清除浮動的話,父div不會將下面兩個div包裹,但還是在父div的範圍之內。 <div class="child"></div></div>
解析:給這兩個子p加浮動,浮動的結果,如果沒有清除浮動的話,父p不會將下面兩個p包裹,但還是在父p的範圍之內,左浮是子p的左邊接觸父p的borderbox的左邊,右浮是子p接觸父p的borderbox右邊,除非設定margin來撐開距離,否則一直是這個規則。
BFC布局規則4:BFC的地區不會與float box重疊:
<div class="aside"></div><div class="text"> <div class="main"></div></div><!--下面是css代碼--> .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; overflow: hidden;//觸發main盒子的BFC background: #fcc; } .text{ width: 500px; }
上面aside盒子有一個浮動屬性,覆蓋了main盒子的內容,main盒子沒有清除aside盒子的浮動。只做了一個動作,就是觸發自身的BFC,然後就不再被aside盒子覆蓋了。所以:BFC的地區不會與float box重疊。
BFC有哪些作用:
1.自適應兩欄布局
2.可以阻止元素被浮動元素覆蓋
3.可以包含浮動元素——清除內部浮動
4.分屬於不同的BFC時可以阻止margin重疊
BFC作用1:自適應兩欄布局
還是上面的代碼,此時BFC的地區不會與float box重疊,因此會根據包含塊(父p)的寬度,和aside的寬度,自適應寬度。
BFC 與 Layout
IE 作為瀏覽器中的奇葩,當然不可能按部就班的支援 BFC 標準,於是乎 IE 中有了 Layout 這個東西。Layout 和 BFC 基本是等價的,為了處理 IE 的相容性,在需要觸發 BFC 時,我們除了需要用觸發條件中的 CSS 屬性來觸發 BFC,還需要針對 IE 瀏覽器使用 zoom: 1 來觸發 IE 瀏覽器的 Layout。
.parent { margin-top: 3rem; border: 5px solid #fcc; width: 300px; }.child { border: 5px solid #f66; width:100px; height: 100px; float: left; }
BFC作用3:可以包含浮動元素——清除內部浮動
給父pparent加上 overflow: hidden;
清除浮動原理:觸發父p的BFC屬性,使下面的子p都處在父p的同一個BFC地區之內,此時已成功清除浮動.
還可以向同一個方向浮動來達到清除浮動的目的,清除浮動的原理是兩個p都位於同一個浮動的BFC地區之中
BFC的作用4:阻止margin重疊:
當兩個相鄰塊級子項目分屬於不同的BFC時可以阻止margin重疊
操作方法:給其中一個p外麵包一個p,然後通過觸發外面這個p的BFC,就可以阻止這兩個p的margin重疊
<div class="aside"></div><div class="text"> <div class="main"></div></div><!--下面是css代碼--> .aside { margin-bottom: 100px;//margin屬性 width: 100px; height: 150px; background: #f66; } .main { margin-top: 100px;//margin屬性 height: 200px; background: #fcc; } .text{ /*盒子main的外麵包一個div,通過改變此div的屬性使兩個盒子分屬於兩個不同的BFC,以此來阻止margin重疊*/ overflow: hidden;//此時已經觸發了BFC屬性。 }