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