CSS學習筆記09 簡單理解BFC
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;} 8 .div2 {background-color: #EAFFD0; width: 200px; height: 100px;} 9 .div3 {background-color: #95E1D3; width: 200px; height: 100px;} 10 </style> 11 </head> 12 13 <body> 14 <div class="div1">div1</div> 15 <div class="div2">div2</div> 16 <div class="div3">div3</div> 17 </body> 18 </html>
可以看到,塊級元素的排列順序是從上往下,即使所在行的寬度可以容納多個元素,現在同時給div1與div2添加外邊距
本來div1的下邊距為50px,div2的上邊距為50px,按道理他們之間的距離應為100px才對,可是這裏卻只有50px了,這是因為在一個塊級排版上下文中相鄰的兩個塊級盒之間的垂直margin是折疊的,也就是在CSS學習筆記07 盒子模型中介紹過的外邊距合並,那如何解決這種外邊距合並的現象呢,這個就涉及下面要介紹的BFC了。
什麽是BFC
Block Formatting Contexts 即塊級格式化上下文,它是一個獨立的渲染區域,只有Block-level box參與, 它規定了內部的Block-level Box(display 屬性為 block, list-item, table 的元素)如何布局,並且與這個區域外部毫不相幹。其中 Formatting Context 是一個決定如何渲染文檔的容器,Formatting context是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域,並且有一套渲染規則,它決定了其子元素將如何定位,以及和其他元素的關系和相互作用。最常見的Formatting context有Block fomatting context(BFC)和Inline formatting context(IFC)。CSS2.1 中只有BFC和IFC, CSS3中還增加了GFC和FFC。
通俗點說,BFC就是一個獨立的盒子,並且與這個獨立盒子裏的布局不受外部影響,當然它也不會影響到外面的元素。
在文檔呈現開始的時候,會自動創建一個BFC來對整個頁面進行布局,在沒有創建一個新的BFC的時候,整個文檔就這一個BFC。
BFC的規則
- 內部的box會在垂直方向,從頂部開始一個接著一個地放置(上面的例子可以看出)
- 同一個BFC中,在兩個相鄰的塊級元素中,垂直margin會發生折疊
- 每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,否則相反),即使存在浮動也是如此
- BFC的區域不會與float box重疊
- BFC就是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素,反之亦然
- 計算BFC的高度時,浮動元素也參與計算
觸發BFC
- 根元素
- float屬性不為none(如:left | right)
- overflow的值不為visible(如:hidden | auto | scroll)
- display屬性值為inline-block | flex | inline-flex | table-cell | table-caption
- position為absolute或fixed
應用BFC
解決margin疊加問題
還是上面的那個例子,因為此時頁面的元素的在一個標準流中,所以這個時候body元素就是一個BFC,根據規則
同一個BFC中,在兩個相鄰的塊級元素中,垂直margin會發生折疊
現在給div1設置display:inline-block屬性
此時由於div1元素通過display:inline-block觸發了BFC,此時的div1就是一個獨立的BFC了,根據規則
BFC就是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素,反之亦然
所以這時候就不會發生margin重疊了。
清除內部浮動
當一個標準流中的盒子中所有的子元素都進行了浮動,並且沒有給盒子設置高度時,那麽這個盒子的整個高度就會塌陷,什麽意思呢,看下面的例子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC清除內部浮動</title> 6 <style type="text/css"> 7 .child {background-color: #95E1D3; border: 1px solid #FCE38A; width: 100px; height: 100px;} 8 .parent {width: 300px; border: 1px solid #95E1D3;} 9 </style> 10 </head> 11 <body> 12 <div class="parent"> 13 <div class="child"></div> 14 <div class="child"></div> 15 </div> 16 </body> 17 </html>
父容器的被兩個子div撐起來了,現在給child添加浮動
這個時候,父容器變成了2條重合的線了,也就是高度變為0了,即所說的高度塌陷。根據規則
計算BFC的高度時,浮動元素也參與計算
這時候可以觸發parent生成BFC,那麽parent在計算高度時,parent內部的浮動元素child也會參與計算
布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC布局</title> 6 <style type="text/css"> 7 .left {width: 100px; height: 100px; background-color: #FCE38A; float: left;} 8 .right {width: 300px; height: 150px; background-color: #95E1D3;} 9 10 </style> 11 </head> 12 <body> 13 <div class="left"></div> 14 <div class="right"></div> 15 </body> 16 </html>
根據規則
每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,否則相反),即使存在浮動也是如此
所以即使left設置了左浮動,right的的左邊依然會與包含塊的左邊(即body)相接觸。接著我們可以根據規則
BFC的區域不會與float box重疊
讓right觸發產生BFC,這樣right就不會與left重疊了
這樣就形成了常見的兩列布局。
總之記住一點BFC就是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素,同樣的,外面的元素也不會影響到容器裏面的子元素。
CSS學習筆記09 簡單理解BFC