標籤：容器 垂直 ffd 塌陷 介紹 apt lis oat ble
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了。
什麼是BFCBlock 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的規則還是上面的那個例子，因為此時頁面的元素的在一個標準流中，所以這個時候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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
