學習CSS中的BFC

用戶84 發布于2019-08-29 17:03 / 2127人閱讀

摘要：定義全稱為，意為塊級格式化上下文，是頁面中盒模型布局的渲染模式。可能上面的解釋看了有點懵逼，通俗的說指的的是一塊區域的布局，這個區域的布局有一個顯著特點這個區域內的子元素無論使用何種布局何種樣式都不會影響外部的元素。

定義

BFC全稱為block formatting context，意為塊級格式化上下文，是Web頁面中盒模型布局的css渲染模式。

可能上面的解釋看了有點懵逼，通俗的說BFC指的的是一塊區域的布局，這個區域的布局有一個顯著特點：這個區域內的子元素無論使用何種布局、何種樣式都不會影響外部的元素。BFC比較常見的用法就是用來清除浮動的影響，正常不清楚浮動影響的情況下，父元素的高度是會坍塌的

那么什么時候會觸發BFC呢？滿足一下條件中任何一個：

float的值不為none

position的值不為static或者relate

display的值為table-cell、table-caption、inline-block、flex或者inline-flex中的任意一個

overflow的值不為visible

作用 清除浮動

我們經常會遇到這樣的情況：當一個容器內包含的子元素包含浮動元素時，會導致容器沒有高度，人們常用一個偽類，然后在偽類中用clear屬性清除浮動，其實可以通過定義一個BFC來達到同樣的目的，舉個例子：

.container {
  width: 600px;
  background-color: black;
}
.container div {
  float: left;
  width: 200px;
  height: 200px;
  margin-left: 10px;
  background-color: green;
}

當子元素存在float屬性時，父容器沒有設置高度，父容器的高度就會塌陷，我們可以通過在父容器中加overflow:hidden創建一個BFC來解決這個問題：

.container {
  width: 600px;
  background-color: black;
  overflow: hidden;  
}
.container div {
  float: left;
  width: 200px;
  height: 200px;
  margin-left: 10px;
  background-color: green;
}

防止文字環繞


    
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test

img {
  float: left;
  width: 40px;
  height: 40px;
}

如上面例子所示，正常情況下我們期待的結果是左邊顯示圖片，右邊顯示文字描述，而不是上面展示的文字環繞在圖片周圍，此時我們同樣可以通過創建一個BFC來解決這個問題：

img {
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
p {
  overflow: hidden;
}

防止外邊距折疊

常規文檔流中，子元素都是沿著父元素頂部開始一個接著一個垂直擺放的，相鄰兄弟間的垂直間距由他們中間距最大的一個元素決定，而不是疊加在一起，這就是邊距折疊，舉個例子：


    one
    two

.container {
  width: 200px;
  background-color: black;
}
p {
  width: 150px;
  background-color: green;
}
.one {
  margin: 10px 0;
}
.two {
  margin: 20px 0;
}

這種情況，我們可以通過創建一個新的BFC來解決


  one
  
    two

.container {
  width: 200px;
  background-color: black;
}
p {
  width: 150px;
  background-color: green;
}
.one {
  margin: 10px 0;
}
.two {
  margin: 20px 0;
}
.new {
  overflow: hidden;
}

總結

這篇文章簡單的介紹了BFC特點和舉例了BFC的常用方法，如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏
最后，打個小廣告：阿里云雙十一云服務新用戶一折優惠車票

GPU云服務器云服務器 bfc bfc布局學習css css學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/114071.html

BFC及應用學習總結

首先回顧一下普通流，普通流對后面進一步了解BFC有很大的作用普通流（Normal Flow）普通流是網頁中元素的默認排版，默認情況下塊級元素：以block flow direction排列（每一個塊級元素新起一行，即以從上往下以列排列）行內元素：不會另起一行，一個接一個排布，直到空間不足脫離普通流 CSS有以下幾種方法使元素脫離普通流 float float能夠使元素向某一方向偏移，...

zorpan 2019-08-30 15:56 評論0 收藏0
CSS中重要的BFC

摘要：中有個重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實分為定位流浮動流普通流三種。使用包含浮動元素注意，這里觸發并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為定位...

plus2047 2019-08-29 14:20 評論0 收藏0
理解 CSS 布局和 BFC

摘要：布局中有一些概念，一旦你理解了它們，就能真正提高你的布局能力。我們通常有兩種方法來解決這個布局問題。是布局中的一個迷你布局你可以將看作是頁面內的一個迷你布局。理解瀏覽器如何布置網頁是非常基礎的。 CSS布局中有一些概念，一旦你理解了它們，就能真正提高你的 CSS 布局能力。本文是關于塊格式化上下文(BFC)的。你可能從未聽說過這個術語，但是如果你曾經用CSS做過布局，你可能知道它是什么...

miya 2019-08-30 15:43 評論0 收藏0
前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0