css3中bfc的概念是什么

這篇文章主要介紹“css3中bfc的概念是什么”，在日常操作中，相信很多人在css3中bfc的概念是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css3中bfc的概念是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

在css3中，BFC的中文意思為“塊格式化上下文”，是Web頁面的可視CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。簡單來說，BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。 BFC的作用：1、解決外邊距折疊問題；2、BFC的區域不會與浮動的元素區域重疊，可創建CSS中常用的兩欄布局；3、清除元素內部的浮動。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

一、什么是BFC

官方定義：BFC（Block Formatting Context）塊格式化上下文， 是Web頁面的可視CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。

說人話：BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。 我們經常使用到BFC，只不過不知道它是BFC而已。

二、如何創建一個BFC

常用的方式有以下幾種：

• 浮動元素（元素的float不是 none，指定float為left或者right就可以創建BFC）

• 絕對定位元素（元素的 position 為 absolute 或 fixed）

• display:inline-block，display:table-cell，display:flex，display:inline-flex

• overflow指定除了visible的值

看吧，是不是經常在代碼中用到上邊列舉的屬性，你在不知不覺中就開啟了BFC，只是你不知道它是BFC而已。

三、BFC有什么特點

• 在BFC中，塊級元素從頂端開始垂直地一個接一個的排列。（當然了，即便不在BFC里塊級元素也會垂直排列）

• 如果兩個塊級元素屬于同一個BFC，它們的上下margin會重疊（或者說折疊），以較大的為準。但是如果兩個塊級元素分別在不同的BFC中，它們的上下邊距就不會重疊了，而是兩者之和。

• BFC的區域不會與浮動的元素區域重疊，也就是說不會與浮動盒子產生交集，而是緊貼浮動邊緣。

• 計算BFC的高度時，浮動元素也參與計算。BFC可以包含浮動元素。（利用這個特性可以清除浮動）

• BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。

四、BFC有什么用

1、解決外邊距折疊問題

外邊距折疊（Margin collapsing）也只會發生在屬于同一BFC的塊級元素之間。

html：

<div class="div1"></div>
<div class="div2"></div>

css：

.div1 {
  width: 100px;
  height: 100px;
  background-color: green;
  margin-bottom: 10px;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 20px;
}

對第一個div的margin-bottom設置為10px，第二個div的margin-top設置為20px，我們可以看到兩個盒子最終的邊距是20px，是兩者之中較大的一個。這就是外邊距重疊的問題。

為了解決這個問題，我們可以讓這兩個div分屬于不同的BFC，或者只要把其中一個div放到BFC中就可以。原因是：BFC就是頁面上的一個隔離的獨立容器，容器里面的元素不會對外邊產生影響。

html：

<div class="wrapper">
  <div class="div1"></div>
</div>
<div class="div2"></div>

css：

.wrapper{
  /* 開啟BFC */
  overflow: hidden;
}

.div1 {
  width: 100px;
  height: 100px;
  background-color: green;
  margin-bottom: 10px;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 20px;
}

現在的代碼可以解決外邊距重疊的問題啦！但是注意，在我們這個案例中，雖然指定position屬性為absolute和fixed，或者float指定為left、right也可以創建BFC，但是這個元素會從當前文檔流中移除，不占據頁面空間，并且可以和其它元素重疊。導致下邊的div會把上邊的div給覆蓋掉。

2、制作兩欄布局

BFC的區域不會與浮動的元素區域重疊。

我們可以利用這個特性來創建CSS中常用的兩欄布局（左邊寬度固定，右邊寬度自適應）。

HTML：

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

CSS：

.left {
  width: 200px;
  height: 100px;
  background-color: green;
  float: left;
}

.right {
  height: 100px;
  background-color: red;
  overflow: hidden; /* 創建BFC */
}

效果如圖所示：

另一個案例：

html：

<div class="father">
  <div class="left"></div>
  <div class="right">
    哈哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  </div>
</div>

css：

.father {
  width: 200px;
  border: 5px solid blue;
}

.left {
  width: 50px;
  height: 50px;
  background-color: green;
  float: left;
}

.right {
  height: 100px;
  background-color: red;
}

當在父元素中只設定一個盒子浮動，另一個不浮動時，會造成第二個盒子在第一個盒子的下方，被覆蓋掉一部分（但文字不會被覆蓋）。

效果如圖：

給第二個元素設置BFC：

 .right {
   height: 100px;
   background-color: red;
   overflow: hidden;
 }

效果如圖：

3、清除元素內部的浮動

這里清除浮動的意思并不是清除你設置的元素的浮動屬性，而是清除設置了浮動屬性之后給別的元素帶來的影響。例如我們給子元素設置浮動，那么父元素的高度就撐不開了。

BFC有一個特性：計算BFC的高度時，浮動元素也參與計算，利用這個特性可以清除浮動。

html：

<div class="div1">
  <div class="son1">a</div>
  <div class="son2">b</div>
</div>

css：

.div1 {
  width: 150px;
  border: 1px solid red;

  /*使用BFC來清除浮動*/
  overflow: hidden;
}

.son1, .son2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: left;
}

.son2 {
  background-color: greenyellow;
}

到此，關于“css3中bfc的概念是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！