bfc是什麼_BFC的觸發和作用

前言 ：BFC的全稱是塊級格式化上下文，是很抽象的概念，具體是什麼很難說清，但是一定要了解如何觸發BFC和BFC有那些作用。

面試裡如果遇到如何遇到問什麼是BFC的話，不要試着去說什麼是BFC，就是塊級格式化上下文，盡量說BFC的作用，以及如何觸發，這就是BFC。

如何觸發BFC？

• 根元素，即HTML元素
• float不為none
• overflow的值不為visible
• display的值為inline-block,table-cell,table-caption
• position的值為absolute或者fixed

BFC的作用？

• 自适應兩欄布局
• 可以阻止元素被浮動元素覆寫
• 如果元素裡面包含浮動元素，可以清除内部浮動（原理：父元素建立了BFC後，裡面的子元素即使是float也會參與高度計算）
• 分屬于不同BFC時，可以防止margin重疊

以下是作用的幾個例子：

1.自适應兩欄布局

未建立BFC時還不能實作兩欄布局

建立BFC後

HTML代碼和CSS代碼：

<
           

2.可以阻止元素被浮動元素覆寫

通過将浮動元素設定為白色透明背景色，可以看得出右邊的元素被左邊的浮動元素覆寫

将右邊的元素建立BFC後，右邊元素不會被左邊浮動元素覆寫,為了更明顯的顯示，将背景色改成了黃色

HTML和CSS代碼

<
           

3.清除内部浮動

可以看見在父元素裡面的兩個浮動元素跑出來了，如果清楚了内部浮動，就不會跑出來了

父元素建立BFC後，可以看見内部的浮動元素被清除浮動了

HTML和CSS代碼

<
           

4.分屬于不同BFC時，可以防止margin重疊，這裡舉出兄弟邊距重疊的例子

将上下兩塊元素的margin都設定為40px，我們可以發現，上下兩塊元素之間的邊距也是40px；說明發生了邊距重疊

将左邊的元素建立BFC後我們可以看到，邊距重疊消失了

HTML和CSS代碼

<div class="container">
     <div class="left"></div>
     <div class="right"></div>
 </div>

-----------------------------------------------------------------------

.left{
  width:100px;
  height:200px;
  background:green;
  margin:40px;
  display:inline-block;//建立了BFC
}
.right{
  margin:40px;
  width:400px;
  height:200px;
  background:red;
}