CSS規範中的BFC

標籤：blog   pre   垂直   div   hidden   規範   適應   nbsp   table   

一、什麼是BFC

1.Formatting context:頁面中的一塊渲染地區，並且有一套渲染規則，它決定了其子項目將如何定位，以及其他元素的關係和相互作用。

2.Box：css布局的基本單位。元素的類型和display屬性決定了這個box的類型。不同類型的box，會參與不同的Formatting Context（決定如何渲染文檔）。

　　block-level box：display屬性是block、list-item，table的元素，參與block Formatting context

　　inline-level box：display屬性是inline，inline-block，inline-table的元素，參與inline formatting context

3.BFC定義

　　塊級格式化上下文，他是一個獨立的渲染地區，只有block-level box參與，規定了內部的block-level box如何布局，並且與這個地區外部沒有關係

4.BFC布局規則

　　1.內部的box會在垂直方向，一個接一個地放置

　　2.box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

　　3.內部每個元素的margin box的左邊，與包含塊border box的左邊相接觸，浮動也是如此

　　4.BFC的地區不會與float box重疊

　　5.BFC就是頁面上的一個隔離的獨立容器，容器裡面的子項目不會影響到外面的元素

　　6.計算BFC的高度時，浮動元素也參與計算

 

二、產生的BFC的元素

1.根項目

2.float屬性部位none

3.position為absolute或fixed

4.display為table-cell，table-caption，flex，inline-flex

5.overflow不為visible

 

三、BFC的作用及原理

1.自適應兩欄布局

範例程式碼：

     #aside{        float: left;        width: 400px;        height: 400px;        background-color:skyblue;    }    #main{        height: 600px;        background-color: grey;    }    <div id=‘aside‘></div>    <div id=‘main‘></div>

內部元素的margin的左邊與包含塊的左邊接觸，效果：

因為BFC地區不與float box重疊，設定overflow：hidden，使得main產生BFC

 

2.清除浮動

範例程式碼：

    .par {        border: 5px solid #fcc;        width: 300px;    }     .child {        border: 5px solid #f66;        width:100px;        height: 100px;        float: left;    }    <div class="par">        <div class="child"></div>        <div class="child"></div>    </div>

：

BFC計算高度時，浮動元素也會參與計算，觸發par產生BFC

    .par {        border: 5px solid #fcc;        width: 300px;       overflow: hidden;    }

 

3.防止垂直margin重疊

範例程式碼：

    p {        color: #f55;        background: #fcc;        width: 200px;        line-height: 100px;        text-align:center;        margin: 100px;    }    <p>Haha</p>    <p>Hehe</p>

兩個p標籤是同一個BFC的內部box，內部相鄰的box的margin發生重疊，效果：

將p包裹一個容器，產生一個BFC，兩個p就不在同一個BFC中，就不會發生摺疊

   .wrap{        overflow: hidden;    }    p {        color: #f55;        background: #fcc;        width: 200px;        line-height: 100px;        text-align:center;        margin: 100px;    }    <div class=‘wrap‘>        <p>Haha</p>    </div>    <p>Hehe</p>

CSS規範中的BFC