bfc是什麼：bfc（block formatting context）塊級格式上下文，是乙個css的布局概念，是頁面視覺化css渲染的一部分，是塊盒子的布局過程發生的區域。
bfc的觸發條件：
1.浮動元素（元素的float不是none）
2.絕對定位元素（元素的position為absolute或flex）
3.行內塊元素（display：inline-block）
4.overflow值部位visible的塊元素
5.彈性元素（display:flex的直接子元素）
bfc的特性：
1.內部的box會在垂直方向上乙個乙個放
2.垂直方向上的距離由margin決定
3.bfc的區域不會和float元素區域重疊
4.計算bfc高度時，浮動元素也參與計算
5.bfc是頁面上的獨立容器，容器的子元素不會影響外面的元素
應用：
1.bfc中的盒子對其
2.外邊距摺疊：垂直方向上的距離由margin決定
常規文件流中，兩個兄弟盒子之間的垂直距離不是外邊距之和，而是以大的為準（外邊距摺疊）
如何讓外邊距不摺疊：使用bfc,給其中乙個盒子包乙個div
3.不被浮動元素覆蓋-兩欄布局、三欄布局
左邊為固定寬度float:left，右邊不設寬度overflow:hidden觸發bfc，右邊自適應，隨瀏覽器視窗大小變化
4.防止文字環繞盒子，為文字設定overfloat:hidden
擴充套件：overfloat:hidden的三種用法
1. 隱藏溢位
給乙個元素中設定overflow:hidden，那麼該元素的內容若超出了給定的寬度和高度屬性，那麼超出的部分將會被隱藏，不佔位。
2. 清除浮動
一般而言，父級元素不設定高度時，高度由隨內容增加自適應高度。當父級元素內部的子元素全部都設定浮動float之後，子元素會脫離標準流，不佔位，父級元素檢測不到子元素的高度，父級元素高度為0。
如上，由於父級元素沒有高度，下面的元素會頂上去，造成頁面的塌陷。因此，需要給父級加個overflow:hidden屬性，這樣父級的高度就隨子級容器及子級內容的高度而自適應。
由於在ie比較低版本的瀏覽器中使用overflow：hidden；是不能達到這樣的效果，因此需要加上 zoom:1;所以為了讓相容性更好的話，如果需要使用overflow:hidden來清除浮動，那麼最好加上zoom:1;
3. 解決父元素外邊距塌陷的問題
父級元素內部有子元素，如果給子元素新增margin-top樣式，那麼父級元素也會跟著下來，造成外邊距塌陷，因此，給父級元素新增overflow:hidden，就可以解決這個問題了。
BFC 塊級格式上下文
url url 上文已經將的很詳細了，大家可以看看！這裡提另外乙個相關問題 url 我在這篇文章中找到了答案 問題是 有時候我們調子元素的margin top，是想和父元素拉開距離，可事實是和父元素沒拉開距離，反而是父元素與上面拉開了距離，感覺子元素的設定在父元素上起作用，為什麼呢？這是css2.1...
塊級格式化上下文（BFC）
最近遇到乙個專業的名詞，不是很懂，所以了解了一下，並總結歸納一下。首先清楚我們的問題是什麼？bfc是什麼？怎麼建立？什麼情況下建立？有什麼特性和作用？bfc 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1，浮動元素，float 除 none 以外的值 2，絕對定位元素，p...
BFC 塊級格式化上下文
bfc簡述 bfc即 block formatting contexts 塊級格式化上下文 是 w3c css2.1 規範中的乙個渲染規範，是頁面中的一塊渲染區域並且有自己獨有的渲染規則，決定了子元素的渲染位置以及和其他元素之間的關係和相互作用。bfc規則 同一bfc內的塊元素的上邊的邊距重疊 規定...