技術文章 » css3中什麼是bfc

css3中什麼是bfc

2022-08-01 18:01:04

在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，是兩者之中較大的一個。這就是外邊距重疊的問題。

1.gif

為了解決這個問題，我們可以讓這兩個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 */
}

效果如圖所示：

2.png

另一個案例：

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;
}

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

效果如圖：

3.png

給第二個元素設定BFC：

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

效果如圖：

4.png

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;
}

5.png

（學習視訊分享：）

以上就是css3中什麼是bfc的詳細內容，更多請關注TW511.COM其它相關文章！