設(shè)置BFC功能及使用示例詳解
首先BFC是啥?
**官方描述:塊格式化上下文(Block Formatting Context,BFC)是 Web 頁面的可視 CSS 渲染的一部分,是塊級盒子的布局過程發(fā)生的區(qū)域,也是浮動(dòng)元素與其他元素交互的區(qū)域。
額......
是的,正常人看完還是不知道BFC是啥。
我用人類的語言嘗試翻譯一下:BFC就是一個(gè)就是一個(gè)容器。只不過這個(gè)容器里面元素怎么布局都不會(huì)影響外面的元素,外面的元素同樣也影響不到這個(gè)盒子里面的元素。
好......
看完差不多你就該問了,???到底怎么影響了?
好嘛,不要急......
不設(shè)置BFC會(huì)對網(wǎng)頁布局有怎么樣的影響?
.box1 { width: 400px; border: 10px solid pink; } .c-box1 { width: 200px; height: 200px; background-color: skyblue; float: left; } .c-box2 { width: 200px; height: 200px; background-color: blueviolet; float: left; } .box2 { width: 300px; height: 300px; background-color: red; } <div class="box1"> <div class="c-box1"> </div> <div class="c-box2"> </div> </div> <div class="box2"></div>
由于box1沒有設(shè)置高度,box1里面的元素設(shè)置浮動(dòng)后,無法將其撐起,從而影響到了外面的box2。那么如果box1是一個(gè)BFC的話,那么效果就會(huì)如下圖一樣:
給box1加上 overflow: hidden;沒錯(cuò)這就是讓一個(gè)容器形成BFC的一種方式。
.box1 { width: 400px; border: 10px solid pink; overflow: hidden; }
???就就就......就這?那么你肯定想問這個(gè)BFC還有其他作用嗎?
BFC還有啥作用?
- 解決盒子高度塌陷的問題
沒錯(cuò),也就是上面那種情況。
- 解決盒子margin塌陷的問題
.box1 { width: 100px; height: 100px; background-color: purple; margin-bottom: 30px; } .box2 { width: 100px; height: 100px; background-color: red; margin-top: 10px; } <div class="box1"></div> <div class="box2"></div>
盒子垂直方向的margin是存在塌陷問題,box2設(shè)置的10px向上的margin沒起作用。所以,把box1和box2變成一個(gè)BFC就可以解決這個(gè)問題。
- 可以防止元素被相鄰的浮動(dòng)盒子覆蓋
.box1 { float: left; width: 150px; height: 200px; background-color: purple; } .box2 { width: 200px; height: 200px; background-color: red; } <div class="box1"></div> <div class="box2"></div>
這種情況,除了可以box2設(shè)置overflow: hidden; 還可以設(shè)置float: left。
沒錯(cuò),上面一直用使用overflow: hidden來設(shè)置BFC,其實(shí)設(shè)置浮動(dòng)也是一種形成BFC的方式。那么還有沒有其他方式?答案是肯定的。
都有哪些方式來創(chuàng)建BFC
- 設(shè)置浮動(dòng),不管是左浮動(dòng)還是右浮動(dòng)都可以,float屬性值不是none即可
- 設(shè)置定位,position的值不是static或者ralative
- 設(shè)置display,display的值是inline-block、flex或者inline-flex
- overflow值不為 visible,為 auto、scroll或者h(yuǎn)idden
完結(jié)感想
有沒有發(fā)現(xiàn)創(chuàng)建一個(gè)BFC容器其實(shí)大部分是為了解決浮動(dòng)布局所引起的問題,另外一種說法就叫清除浮動(dòng)。浮動(dòng)布局常見于一些PC端門戶網(wǎng)站,因?yàn)槿温毜墓局饕菍懸苿?dòng)端H5,常用的flex布局、定位這些無意間已經(jīng)是在創(chuàng)建BFC,而且基本上沒有用到浮動(dòng),所以對這塊知識(shí)是比較模糊的。不過概念還是得捋清楚,面試好像挺喜歡問關(guān)于這個(gè)BFC的問題。
以上就是設(shè)置BFC功能及使用示例詳解的詳細(xì)內(nèi)容,更多關(guān)于BFC 設(shè)置使用的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS中類的靜態(tài)方法,靜態(tài)變量,實(shí)例方法,實(shí)例變量區(qū)別與用法實(shí)例分析
這篇文章主要介紹了JS中類的靜態(tài)方法,靜態(tài)變量,實(shí)例方法,實(shí)例變量區(qū)別與用法,結(jié)合實(shí)例形式詳細(xì)分析了JS中類的靜態(tài)方法,靜態(tài)變量,實(shí)例方法,實(shí)例變量相關(guān)功能、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03將函數(shù)的實(shí)際參數(shù)轉(zhuǎn)換成數(shù)組的方法
實(shí)際參數(shù)在函數(shù)中我們可以使用 arguments 對象獲得 (注:形參可通過 arguments.callee 獲得),雖然 arguments 對象與數(shù)組形似,但仍不是真正意義上的數(shù)組。2010-01-01js中opener與parent的區(qū)別詳細(xì)解析
本篇文章主要是對js中opener與parent的區(qū)別進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01JavaScript實(shí)現(xiàn)為事件句柄綁定監(jiān)聽函數(shù)的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)為事件句柄綁定監(jiān)聽函數(shù)的方法,結(jié)合實(shí)例形式分析了javascript事件綁定的常用技巧與注意事項(xiàng),需要的朋友可以參考下2017-11-11JavaScript中分號(hào)的一些細(xì)節(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中分號(hào)的一些細(xì)節(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05javascript 隨機(jī)抽獎(jiǎng)程序代碼
javascript 隨機(jī)抽獎(jiǎng)程序代碼,主要是利用了js的Math.random方法。需要的朋友可以參考下。2009-11-1150行代碼實(shí)現(xiàn)Webpack組件使用次數(shù)統(tǒng)計(jì)
這篇文章主要介紹了50行代碼實(shí)現(xiàn)Webpack組件使用次數(shù)統(tǒng)計(jì),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03