CSS中BFC的應用
前言
說起BFC,一些不熟悉的童鞋往往會有兩種情況:1. 用了BFC但是不知道有這回事,2.請教過大佬聽過BFC大名然後CV了一段overflow: hidden解決了問題然後不刨根問底,筆者曾經也是其中的一員。思維不清晰腫麼辦?問谷歌娘唄~看了好多文章,知道自己沒有過目不忘的本事,還是覺得要自己動手寫寫,一來加深印象,二來方便日後追溯,故撰此文。
什麼是BFC?
w3c是這麼解釋的:
浮動元素和絕對定位元素,非塊級盒子的塊級容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不為“visiable”的塊級盒子,都會為他們的內容建立新的
塊級格式化上下文
(block formatting context)。
請注意,BFC並不是一個css屬性,也不是一段程式碼,而是css中基於box的一個佈局物件和單位,它是頁面中的一塊渲染區域,並且有一套渲染規則,它決定了其子元素將如何定位,以及和其他元素的關係和相互作用。明確地,它是一個獨立的盒子,並且這個獨立的盒子內部佈局不受外界影響,當然,BFC也不會影響到外面的元素。
成為BFC的條件
其實在w3c規範中已經簡單羅列了稱為BFC的基本條件,但我們還是詳細說明下,保持記憶脈絡清晰。
一個BFC是一個HTML盒子並且至少滿足下列條件中的任何一個:
float
的值不為noneposition
display
的值為 table-cell, table-caption, inline-block,flex, 或者 inline-flex中的其中一個overflow
的值不為visible- 根元素
BFC的特性
BFC的特性可以總結為以下幾點:
1. BFC內部,盒子由上至下按順序進行排列,其間隙由盒子的外邊距決定,並且,當同一個BFC中的兩個盒子同時具有相對方向的外邊距時,其外邊距還會發生疊加(Margin Collapse)
2. BFC內部,無論是浮動盒子還是普通盒子,其左總是與包含塊的左邊相接觸(從右到左的的格式,否則為與右邊框相接觸)
3. BFC 區域不會
4. BFC內外佈局不會相互影響
5. 計算BFC高度的時候,浮動元素的高度也計算在內
觸發BFC
根據成為BFC的條件,一般有以下4種方法觸發BFC:
- display: table
前後帶有換行符,我們一般也不常用
- overflow: scroll
可能會出現不想要的滾動條,醜
- float: left
萬一我們不想讓元素浮動呢?
- overflow: hidden
比較完美的建立BFC的方案,副作用較小,彷彿遇到了我的心動女生
BFC能解決的問題
1. 解決margin collapse(外邊距疊加)
什麼是外邊距疊加?複述一遍:
當同一個BFC中的兩個盒子同時具有相對方向的外邊距時,外邊距會發生疊加(Margin Collapse),當兄弟盒子的外邊距不一樣時,將以最大的那個外邊距為準。
如上述展示,我們將內部灰色盒子的垂重margin設定為和自身高度一樣,按自然思維兩個盒子之間的距離應該是兩個盒子的高度,由於外邊距疊加,只剩下一個身位的高度。
要解決上述問題,設想:如果他們屬於不同的BFC,他們之間的外邊距將不會摺疊。我們給其中的一個盒子外部包裹一層父盒子,併成為一個BFC。
現在可以清楚地看到,第一個盒子由於不再和其他其他同類名盒子在同一個BFC中,它和第二個盒子的外邊距並沒有發生疊加
總的來講,外邊距疊加本身是由BFC引起的,但是現在我們要用BFC來解決這個問題,頗有點以毒攻毒的味道。
2.清除浮動
想想那些年我們一起清除過的浮動,解決方式是什麼?clear: both?父元素一起浮動?這些都沒錯,但是作為前端開發者,我們解決問題應該需要掌握多種技能,以適應多種不同的問題環境,偶爾還可以裝裝X:)
我們往往會遇到這樣一種情況,父元素高度自適應,子元素浮動,因為不在同一文件流中,父元素的高度會坍塌,如下所示:
這個時候,我們可以利用BFC來解決問題,根據是:計算BFC高度的時候,浮動元素的高度也計算在內
我們通過新增overflow: hidden
,在容器中建立一個新的BFC,效果如下:
只需要新增一個屬性,效果不錯吧~
3.實現兩欄佈局
一般的後臺管理系統,很多都是傳統的左選單右內容的兩欄佈局,我們經常會選擇左欄浮動,右邊設定左padding或者margin的思路來實現這一做法,其實利用BFC也可以建立兩欄佈局,根據是:BFC 區域不會與float box區域相疊加
簡單吧~
結尾
前端知識網路錯綜複雜,包括各種hack和黑科技,難免疏漏,或有不對之處,歡迎交流