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

寫在最前：BFC看起來是個很陌生的概念但它卻時時發生在咱們工做中，如何清除浮動影響？如何避免margin穿透問題？如何編寫兩欄自適應佈局？都和BFC有這密不可分的關係，下面走進切圖妞的世界，分分鐘搞定BFC！

1、什麼是BFC？

BFC概念

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其餘元素交互的區域。簡而言之，BFC就是一種邊距重疊的解決方案。

BFC原理

• BFC內部元素的元素在垂直方向上的邊距會發生重疊
• BFC不會與浮動元素重疊
• BFC是獨立的容器，不會影響裏面的元素，裏面的元素也不會影響外面元素
• 計算BFC元素高度時，浮動元素也會參與計算

2、BFC產生條件

主流：

• 根元素或包含根元素的元素
• 浮動元素：float不爲none(float+float具備包裹性和破壞性致使沒法自適應，通常用在塊狀浮動佈局)
• 絕對定位元素：position不爲static或者relative(absolute脫離文檔流)
• overflow 值不爲 visible 的塊元素(overflow可自適應，但因爲溢出不可見限制了應用場景)
• 行內塊元素：display爲inline-block(inline-block具備包裹性，沒法自適應,IE8如下沒法識別該屬性)
• 表格單元格：元素的 display爲 table-cell（HTML表格單元格默認爲該值，table-cell具備包裹性，無溢出特性，絕對寬度也能自適應）

非主流：

• 表格標題：元素的 display 爲 table-caption，HTML表格標題默認爲該值
• 匿名錶格單元格元素：元素的 display爲 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table
• display 值爲 flow-root 的元素
• contain 值爲 layout、content或 strict 的元素
• 彈性元素：display爲 flex 或 inline-flex元素的直接子元素
• 網格元素：display爲 grid 或 inline-grid 元素的直接子元素
• 多列容器：元素的 column-count 或 column-width 不爲 auto，包括 column-count 爲 1
• column-span 爲 all 的元素始終會建立一個新的BFC，即便該元素沒有包裹在一個多列容器中

3、BFC使用場景

一、margin穿透問題1

寫樣式的時候經常懷疑個人margin是被瀏覽器吞掉了嗎？
做爲一個子元素想離父元素上邊距有50px的距離，正常狀況下是這麼顯示的

<section class="sec" style="overflow:hidden">
  <article class="child">height: 50px;margin-top: 50px;</article>
</section>

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

子元素的margin-top值由於穿透問題沒有實現預想效果

解決方法：使父元素變爲BFC，添加overflow:hidden的樣式，就會實現以下效果

<section class="sec" style="overflow:hidden">
  <article class="child">height: 50px;margin-top: 50px;</article>
</section>

二、margin穿透問題2

書寫列表結構的時候，margin-top爲20px,margin-bottom爲20px，預想中應該出現40px的效果，可是正常狀況下是這樣的：

<section class="margin">
  <p>切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞</p>
  <p>切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞</p>
</section>

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

margin-top和margin-bottom在垂直方向的邊距會發生重疊現象，margin-top和margin-bottom哪一個大就間隔哪一個的距離。

解決方法：給子元素再建立一個父元素，使父元素是BFC

<section class="margin">
  <div style="overflow:hidden">
    <p>切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞</p>
  </div>
  <div style="overflow:hidden">
    <p>切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞</p>
  </div>
</section>

三、兩欄自適應佈局

圖片與文字組合的結構，咱們常常會使圖片浮動起來，利用float的包裹性，讓文字環繞圖片，以下：

<section class="layout">
  <img src="img/bqb1.jpg" class="left" alt="" />
  <div class="right">
    傻人有傻福
  </div>
</section>

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

可是當咱們想把圖片和文字的區塊獨立分來一左一右的時候呢？

解決方法：使右側元素爲BFC，添加overflow:hidden的樣式

img src="img/bqb1.jpg" class="left" alt="" />
  <div class="right" style="overflow:hidden">
    傻人有傻福
  </div>
</section>

當咱們須要圖片與文字間距20px時，有兩種方法：左側margin-right或者右側padding-left

<img src="img/bqb1.jpg" class="left" style="margin-right:20px" />

<div class="right" style="overflow:hidden;padding-left:20px">
  傻人有傻福
 </div>

四、清除浮動

父元素包含浮動元素，致使父元素塌陷，正常狀況以下：

<section class="floatBorder">
  <div class="float">切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞切圖妞</div>
</section>

.floatBorder { background: #ebf6fd;border: 1px solid #FFBE00;margin-top: 20px;}
.floatBorder .float { float: left; line-height: 50px; background: #08d;}

父元素塌陷除了border外失去高度，此時須要利用BFC內子元素即便是浮動元素也會參與計算的原理

解決方法：使父元素變成BFC，添加清除浮動類

.clearfix {*zoom: 1 }
.clearfix:after {content: '';display: table; clear: both }

4、結語

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

尊重原創，如需轉載請註明出處！

參考資料：
張鑫旭-CSS深刻理解之overflow
MDB-塊格式化上下文