前端必懂之熟悉又陌生的BFC

Dongjie_Liu 發(fā)布于2019-08-02 16:10 / 1568人閱讀

寫在最前：BFC看起來是個(gè)很陌生的概念但它卻時(shí)時(shí)發(fā)生在我們工作中，如何清除浮動(dòng)影響？如何避免margin穿透問題？如何編寫兩欄自適應(yīng)布局？都和BFC有這密不可分的關(guān)系，下面走進(jìn)切圖妞的世界，分分鐘搞定BFC！

一、什么是BFC？

BFC概念

塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。簡(jiǎn)而言之，BFC就是一種邊距重疊的解決方案。

BFC原理

BFC內(nèi)部元素的元素在垂直方向上的邊距會(huì)發(fā)生重疊

BFC不會(huì)與浮動(dòng)元素重疊

BFC是獨(dú)立的容器，不會(huì)影響里面的元素，里面的元素也不會(huì)影響外面元素

計(jì)算BFC元素高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算

二、BFC產(chǎn)生條件

主流：

根元素或包含根元素的元素

浮動(dòng)元素：float不為none(float+float具有包裹性和破壞性導(dǎo)致無法自適應(yīng)，一般用在塊狀浮動(dòng)布局)

絕對(duì)定位元素：position不為static或者relative(absolute脫離文檔流)

overflow 值不為 visible 的塊元素(overflow可自適應(yīng)，但由于溢出不可見限制了應(yīng)用場(chǎng)景)

行內(nèi)塊元素：display為inline-block(inline-block具有包裹性，無法自適應(yīng),IE8以下無法識(shí)別該屬性)

表格單元格：元素的 display為 table-cell（HTML表格單元格默認(rèn)為該值，table-cell具有包裹性，無溢出特性，絕對(duì)寬度也能自適應(yīng)）

非主流：

表格標(biāo)題：元素的 display 為 table-caption，HTML表格標(biāo)題默認(rèn)為該值

匿名表格單元格元素：元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認(rèn)屬性）或 inline-table

display 值為 flow-root 的元素

contain 值為 layout、content或 strict 的元素

彈性元素：display為 flex 或 inline-flex元素的直接子元素

網(wǎng)格元素：display為 grid 或 inline-grid 元素的直接子元素

多列容器：元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1

column-span 為 all 的元素始終會(huì)創(chuàng)建一個(gè)新的BFC，即使該元素沒有包裹在一個(gè)多列容器中

三、BFC使用場(chǎng)景 1、margin穿透問題1

寫樣式的時(shí)候常常懷疑我的margin是被瀏覽器吞掉了嗎？
作為一個(gè)子元素想離父元素上邊距有50px的距離，正常情況下是這么顯示的


  height: 50px;margin-top: 50px;

.sec { background: #ebf6fd; }
.child { height: 50px;background: #09d;margin-top: 50px; line-height: 50px;}

子元素的margin-top值因?yàn)榇┩竼栴}沒有實(shí)現(xiàn)預(yù)想效果

解決方法：使父元素變?yōu)锽FC，添加overflow:hidden的樣式，就會(huì)實(shí)現(xiàn)如下效果


  height: 50px;margin-top: 50px;

2、margin穿透問題2

書寫列表結(jié)構(gòu)的時(shí)候，margin-top為20px,margin-bottom為20px，預(yù)想中應(yīng)該出現(xiàn)40px的效果，但是正常情況下是這樣的：


  切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞
  切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞

.margin {background: #ebf6fd;}
.margin p { margin: 20px auto;background: #09d; line-height: 40px;}

margin-top和margin-bottom在垂直方向的邊距會(huì)發(fā)生重疊現(xiàn)象，margin-top和margin-bottom哪個(gè)大就間隔哪個(gè)的距離。

解決方法：給子元素再創(chuàng)建一個(gè)父元素，使父元素是BFC


  
    切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞
  
  
    切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞

3、兩欄自適應(yīng)布局

圖片與文字組合的結(jié)構(gòu)，我們經(jīng)常會(huì)使圖片浮動(dòng)起來，利用float的包裹性，讓文字環(huán)繞圖片，如下：


  
  
    傻人有傻福

.layout {background: #ebf6fd;margin-top: 20px;}
.layout .left { float: left; width: 150px;height: 168px;}
.layout .right {background: #09d;text-align: left; }

但是當(dāng)我們想把圖片和文字的區(qū)塊獨(dú)立分來一左一右的時(shí)候呢？

解決方法：使右側(cè)元素為BFC，添加overflow:hidden的樣式

img src="img/bqb1.jpg" class="left" alt="" />
  
    傻人有傻福

當(dāng)我們需要圖片與文字間距20px時(shí)，有兩種方法：左側(cè)margin-right或者右側(cè)padding-left

父元素包含浮動(dòng)元素，導(dǎo)致父元素塌陷，正常情況如下：

父元素塌陷除了border外失去高度，此時(shí)需要利用BFC內(nèi)子元素即使是浮動(dòng)元素也會(huì)參與計(jì)算的原理

具有BFC屬性的元素是一個(gè)獨(dú)立的容器，它不受子元素影響也不影響子元素！當(dāng)margin遇到BFC，邊距重疊問題得以解決；當(dāng)BFC元素身邊存在浮動(dòng)時(shí)，它拒絕了float的包裹性獨(dú)立成一個(gè)容器不與其重疊；當(dāng)浮動(dòng)元素在BFC元素里面時(shí)，計(jì)算高度時(shí)將內(nèi)部浮動(dòng)元素也進(jìn)行計(jì)算，解決了父元素塌陷的問題！
上面示例代碼已上傳，可下載練習(xí)修改→BFC Demo

參考資料：
張?chǎng)涡?CSS深入理解之overflow
MDB-塊格式化上下文

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

前端必懂之熟悉又陌生的BFC

相關(guān)文章