bfc初探

時間 2019-11-15

標籤 bfc 初探简体版

原文原文鏈接

bfc初探

什麼是bfc

bfc全稱是塊級格式化上下文（block formating context），是web可視化css渲染的一部分，它是塊級盒子的佈局發生，浮動互相交互的部分。css

我所理解的bfc本質上是一個透明的箱子，咱們徹底看不到這個箱子，可是這個箱子是獨立於外部其餘容器而存在的，在這個箱子內部有bfc內部本身的渲染邏輯。html

bfc佈局規則

bfc內的元素一次從上往下排列。web
bfc垂直方向的距離有margin決定，且相鄰兩個元素寬度會發生摺疊佈局
bfc內部的元素的左邊框老是與容器的左邊框重合，浮動也不例外spa
bfc不會與float box重疊code
計算bfc的高度，浮動也會計算在內orm
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。htm

觸發bfc的條件

根元素或者包含根源的元素rem
float不爲none文檔
dispaly爲absolute或者fixed
overflow不爲visiable
dispaly爲inline-block或者table-cell或者table-caption

bfc的應用場景

用bfc包含浮動

若是不建立bfc。浮動元素的父元素的高度會是0，給父元素加一個overflow：hidden。能夠把父元素設置成bfc,這樣能夠使這個元素包含其浮動子元素。

//html
<div class="floatdiv1">
    <p>p1</p>
    <p>p2</p>
</div>

<div class="floatdiv2">
    <p>p3</p>
    <p>p4</p>
</div>


//css
.floatdiv1{
    width: 200px;
    overflow: hidden;
    background-color: green;
    border: 1px solid red;
    margin-bottom: 40px;
}
.floatdiv2{
    width: 200px;
    background-color: yellow;
    border: 1px solid blue;
    margin-bottom: 40px;
}
.floatdiv1 p , .floatdiv2 p{
    float: left;
    width: 50px;
    background-color: pink;
    height: 50px;
    margin: 10px;
}

計算bfc的高度的時候，浮動元素也會參與計算。而浮動元素自己是脫離文檔流的，非bfc元素的高度計算是不會把浮動元素計算在內。

用bfc阻止文字環繞。

正常狀況下，若是一個塊級元素設置成了float，那麼他的兄弟元素會環繞其佈局。

//html
<div class="outer">
    <div class="inner1"></div>
    <div class="inner2"></div>
</div>

//css
.outer{
    width: 200px;
}
.inner1{
    float: left;
    height: 50px;
    width: 50px;
    background-color: orange;
}
.inner2{
    background-color: cadetblue;
    height: 200px;
    //overflow: hidden;   這裏設置overflow的話就會讓inner成爲一個bfc
}

若是inner2設置了overflow屬性，看到效果是下面的圖

inner會環繞在浮動元素div周圍，由於同一個bfc中，元素左邊老是觸碰到容器的左邊，即便存在浮動也是如此。若是不想這樣，能夠給文字一個overflow：hidden。這樣文字所在的區域就成了一個bfc,bfc是不會和float元素重疊的。

解決外邊距摺疊問題

外邊距摺疊的狀況：

防止外邊距摺疊的問題的方法是給bfc內部再寫一個bfc。

//外邊距摺疊的狀況
//html
<div class="div1">
    <p></p>
    <p></p>
    <p></p>
</div>

//css
.div1{
    width: 200px;
    background-color: blue;
}
.div1 p{
    height: 50px;
    margin: 10px 0;
    background-color: orange;
}

解決方案是，把p標籤單獨寫進一個個的bfc裏面，好比在p外邊包一層overflow是hidden的div。這樣的話，兩個p標籤不屬於一個bfc，就不會發生margin摺疊的狀況。

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

//css
.div1{
    width: 200px;
    background-color: blue;
}
p{
    height: 50px;
    margin: 10px 0;
    background-color: orange;
    overflow: hidden;
}
.div2{
    overflow: hidden;
}

//把第三個p標籤寫進一個bfc中，這樣的話，第二個p和第三個p就不會發生摺疊，行距是雙倍的行距而不是單倍的。