BFC(塊級格式化上下文)

BFC(Block formatting context)
直譯爲"塊級格式化上下文"。
元素的顯示模式
咱們前面講過 元素的顯示模式 display。 
分爲 塊級元素   行內元素  行內塊元素 ,其實,它還有不少其餘顯示模式。
<img src="media/dis.png"  style="border: 1px dashed #ccc; padding: 5px;" />
 那些元素會具備BFC的條件
不是全部的元素模式都能產生BFC,w3c 規範: 
display 屬性爲 block, list-item, table 的元素,會產生BFC.
你們有麼有發現這個三個都是用來佈局最爲合理的元素,由於他們就是用來可視化佈局。
注意其餘的,display屬性,好比 line 等等,他們建立的是 IFC ,咱們暫且不研究。
這個BFC 有着具體的佈局特性: 
有寬度和高度 , 有 外邊距margin  有內邊距padding 有邊框 border。
什麼狀況下可讓元素產生BFC
以上盒子具備BFC條件了,就是說有資質了,可是怎樣觸發纔會產生BFC,從而創造這個封閉的環境呢? 
一樣,要給這些元素添加以下屬性就能夠觸發BFC。
-float屬性不爲none
-position爲absolute或fixed
-display爲inline-block, table-cell, table-caption, flex, inline-flex
-overflow不爲visible。
BFC元素所具備的特性
BFC佈局規則特性:
1.在BFC中,盒子從頂端開始垂直地一個接一個地排列.
2.盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊
3.在BFC中,每個盒子的左外邊緣(margin-left)會觸碰到容器的左邊緣(border-left)(對於從右到左的格式來講,則觸碰到右邊緣)。
  1. BFC的區域不會與浮動盒子產生交集,而是緊貼浮動邊緣。
  2. 計算BFC的高度時,天然也會檢測浮動或者定位的盒子高度。
它是一個獨立的渲染區域,只有Block-level box參與, 它規定了內部的Block-level Box如何佈局,而且與這個區域外部絕不相干。
 BFC的主要用途
BFC能用來作什麼?
1. 清除元素內部浮動
只要把父元素設爲BFC就能夠清理子元素的浮動了,最多見的用法就是在父元素上設置overflow: hidden樣式,對於IE6加上zoom:1就能夠了。
主要用到 :
計算BFC的高度時,天然也會檢測浮動或者定位的盒子高度。
2. 解決外邊距合併問題
外邊距合併的問題。
主要用到 :
盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊
屬於同一個BFC的兩個相鄰盒子的margin會發生重疊,那麼咱們建立不屬於同一個BFC,就不會發生margin重疊了。
3.製做右側自適應的盒子問題
主要用到 :
普通流體元素BFC後,爲了和浮動元素不產生任何交集,順着浮動邊緣造成本身的封閉上下文
BFC 總結
BFC就是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素。反之也如此。包括浮動,和外邊距合併等等,所以,有了這個特性,咱們佈局的時候就不會出現意外狀況了。佈局

相關文章
相關標籤/搜索