關于BFC

lordharrd 發布于2019-08-28 18:18 / 3184人閱讀

摘要：簡單理解就是一種渲染規則，規定了頁面上元素如何渲染，元素與元素之間的關系。接上條規則垂直順序排列的元素的距離取決于的大小。的元素內外互不影響。高度包含浮動元素高度。相鄰的兩個元素的會重疊。

1.什么是BFC?

  BFC是Block farmatting context 的簡寫。翻譯過來即：塊級格式化上下文。farmatting context
   簡單理解就是一種渲染規則， 規定了頁面

上元素如何渲染，元素與元素之間的關系。具體就BFC來說，此規則或者說此渲染區域具有塊與塊之間
相互獨立，內部元素互不影響的特點。




  BFC的布局規則：

內部元素會在垂直方向按順序排列。

接上條規則,垂直順序排列的元素的距離取決于margin的大小。相鄰的兩個元素的margin會重疊。

每個元素的左邊會盡可能的去接觸盒子（形成BFC的元素）的左邊。

BFC的元素不會和float的元素重疊。

BFC的元素內外互不影響。

BFC高度包含浮動元素高度。

2.如何生成BFC

 常見的：

float屬性為非none時，如left,right。

position屬性為fixed或者absolute時。

display屬性為inline-block或者為table-cell時。

overflow為非visible時。

3.BFC有什么用？

1.可以清除浮動：

//清除浮動前的代碼：
//css:
    .box{
            border:1px solid red;
            width: 400px;
        }
    .inner-box{
            float: left;
            width: 200px;
            height: 100px;
            background: #ccc;
        }
        
 //html

 可以看到邊框為紅色的div因為浮動塌陷了，我們給此div加上overflow：hidden,形成BFC:

//css
  .box{
            border:1px solid red;
            width: 400px;
            overflow: hidden;
        }
        .inner-box{
            float: left;
            width: 200px;
            height: 100px;
            background: #ccc;
        }
        
//html:

 可以看到div被撐起來了。用的以下規則：

BFC高度包含浮動元素高度。

2.左邊固定，右邊自適應布局：

 //css
   .box{
        border:1px solid red;
        width: 400px;
        height: 300px;
        position: relative;
    }
    .a{
        float: left;
        width: 200px;
        height: 100px;
        background: olivedrab;
    }
    .b{
        background: #777;
        height: 300px;
    }
    
    //html:
         
            我是a
            我是b

(可以用這個做做文字環繞圖片什么的。。)

再看加上float,形成BFC:

//css
 .box{
            border:1px solid red;
            width: 400px;
            height: 300px;
        }
        .a{
            float: left;
            width: 200px;
            height: 100px;
            background: olivedrab;
        }
        .b{
            background: #777;
            height: 300px;
            overflow: hidden;
        }
        
//html

    我是a
    我是b

左邊就自適應寬度了。規則：

overflow為非visible時。

3.解決margin重疊問題：

//css
 .box{
            border:1px solid red;
            width: 400px;
            height: 300px;
        }
        .a{

            width: 400px;
            height: 100px;
            background: olivedrab;
            margin-bottom: 100px;
        }
        .b{
            background: #777;
            height: 100px;
            overflow: hidden;
            margin-top: 100px;
        }
        
//html

    我是a
    我是b

 看代碼可以知道a的margin-bottom加b的margin-top 等于 100+100，然而空白區域只有100像素。這就是發生了margin重疊！
 
 那我們如何來解決這個問題呢？我們知道有這個規則：

接上條規則,垂直順序排列的元素的距離取決于margin的大小。相鄰的兩個元素的margin會重疊。

 那我們反其道而行之不就行了嗎！ 于是我們改造結構，讓a和b不在同一個BFC內：

//css

  .box{
            border:1px solid red;
            width: 400px;
        }
        .a{

            width: 400px;
            height: 100px;
            background: olivedrab;
            margin-bottom: 100px;
        }
        .b{
            background: #777;
            height: 100px;
            overflow: hidden;
            margin-top: 100px;
        }
        .b-box{
            overflow: hidden;
        }
        
//html



    我是a
    
        我是b

可以看到，距離為200PX了。

---------------------------------------結束分割線--------------------------------------------------------------------

以前總是聽別人說BFC，專門了解了一下寫了此文章。忘了拿出來看看。說不定面試也會問到一些呢。- - 暫時就寫到這里了。有什么問題請多多吐槽。

GPU云服務器云服務器 bfc bfc布局關于平臺關于加班

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111156.html

關于CSS里BFC特性的理解和應用

摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規則。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規范中的一個概念...

shixinzhang 2019-08-29 16:34 評論0 收藏0
關于CSS里BFC特性的理解和應用

摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規則。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規范中的一個概念...

vspiders 2019-08-02 11:24 評論0 收藏0
關于BFC的一些應用

摘要：關于的概念性介紹就不贅述了，網上有很多關于此的介紹，后面也羅列了些個人認為很不錯的文摘。那今天要說的是關于它的一些技巧性應用，通過示范比較常會接觸到的排版布局方面的需求來說明下。對于結構有一點要求，觸發的元素必須位于最后一位。關于Block Formatting Context(BFC)的概念性介紹就不贅述了，網上有很多關于此的介紹，后面也羅列了些個人認為很不錯的文摘。那今天要說的...

Java_oldboy 2019-08-28 18:25 評論0 收藏0
關于BFC的一些應用

摘要：關于的概念性介紹就不贅述了，網上有很多關于此的介紹，后面也羅列了些個人認為很不錯的文摘。那今天要說的是關于它的一些技巧性應用，通過示范比較常會接觸到的排版布局方面的需求來說明下。對于結構有一點要求，觸發的元素必須位于最后一位。關于Block Formatting Context(BFC)的概念性介紹就不贅述了，網上有很多關于此的介紹，后面也羅列了些個人認為很不錯的文摘。那今天要說的...

CntChen 2019-08-01 14:58 評論0 收藏0
關于BFC的總結

摘要：雖然工作這么多年了，但是如果讓我直接解釋一下什么是的時候，還是感覺有點不知道怎么準確的表達，下面就翻翻文檔，總結一下，加深一下認識吧。兩個兄弟盒之間的垂直距離由屬性決定。最常見的有簡稱和簡稱。雖然工作這么多年了，但是如果讓我直接解釋一下什么是BFC的時候，還是感覺有點不知道怎么準確的表達，下面就翻翻文檔，總結一下，加深一下認識吧。大家也可以關注我的GitHub后續的更新 1.BFC...

chadLi 2019-08-29 15:27 評論0 收藏0