【CSS】BFC - 塊級格式化上下文

時間 2019-11-06

標籤 CSS bfc 格式化上下文欄目 CSS 简体版

原文原文鏈接

BFC（block formatting context）塊級格式化上下文。html

若是一個元素具備 BFC，內部子元素不管如何都不會影響外部的元素。因此，BFC 元素是不可能發生 margin 重疊的，由於 margin 重疊是會影響外面的元素的; BFC 元素也能夠用來清除浮動的影響，由於若是不清除，子元素浮動則父元素高度塌陷，必然會影響後面元素佈局和定位，這顯然有違 BFC 元素的子元素不會影響外部元素的設定。瀏覽器

觸發BFC的狀況有幾下幾種：佈局

<html>根元素;
float 的值不爲 none;
overflow 的值爲 auto、scroll 或 hidden;
display 的值爲 table-cell、table-caption 和 inline-block 中的任何一個;
position 的值不爲 relative 和 static。

BFC是一個獨立的佈局環境，其中的元素佈局是不受外界的影響，而且在一個BFC中，塊盒與行盒（行盒由一行中全部的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。spa

上面幾種狀況下無須使用 clear:both 屬性去清除浮動code

BFC 與流體佈局

BFC 的結界特性最重要的用途其實不是去 margin 重疊或者是清除 float 影響，而是實現更健壯、更智能的自適應佈局。orm

其優勢爲：htm

自適應內容因爲封閉而更健壯，容錯性更強。比方說，內部設置 clear:both 不會與 float 元素相互干擾而致使錯位
自適應內容自動填滿浮動之外區域，無須關心浮動元素寬度，能夠整站大規模應用

所以遇到兩欄佈局能夠使用以下方式：blog

<div class="bfc">
    <img class="left" src="test.jpg">
    <p class="right">你好，你好，你好...</p>
</div>

...

.left { float: left; }
.right { float: right; }
.bfc { overflow: hidden; }

能實現自適應佈局的屬性有如下幾個：ip

overflow：autohidden (適用於IE7及以上)
display:inline-block (適用於IE六、IE7)
display:table-cell (適用於IE8)

利用以上屬性可實現兩套針對IE7以上的自適應佈局：
一、藉助overflow文檔

.lbf-content { overflow: hidden; }

二、融合 display:table-cell 和 display:inline-block

.lbf-content {
    display: table-cell; 
    width: 9999px; 
    /* 若是不須要兼容 IE7，下面樣式能夠省略 */       *display: inline-block; *width: auto;
}

以上兩種基於BFC的自適應佈局均支持無限嵌套，所以，多欄自適應能夠經過嵌套方式實現。

最後，關於display:table-cell 元素內連續英文字符沒法換行的問題，能夠用下面這種方式解決：

.word-break {
      display: table;
      width: 100%;
      table-layout: fixed;
      word-break: break-all;
}

外邊距摺疊

常規流佈局時，盒子都是垂直排列，二者之間的間距由各自的外邊距所決定，但不是兩者外邊距之和。

<div class="container">
  <p>Sibling 1</p>
  <p>Sibling 2</p>
</div>

......

.container {
  background-color: red;
  overflow: hidden; /* creates a block formatting context */
}
p {
  background-color: lightgreen;
  margin: 10px 0;
}

其渲染結果爲：

理論上，兩個p元素之間的外邊距應當是兩者外邊距之和（20px）但實際上倒是10px，這是外邊距摺疊(Collapsing Margins)的結果。

摺疊的結果按照以下規則計算：

一、兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。
二、兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。
三、兩個外邊距一正一負時，摺疊結果是二者的相加的和。

產生摺疊的必備條件：margin必須是鄰接的!

利用 BFC 避免外邊距摺疊

BFC產生外邊距摺疊要知足一個條件：兩個相鄰元素要處於同一個BFC中。因此，若兩個相鄰元素在不一樣的BFC中，就能避免外邊距摺疊。

<div class="container">
    <p>Sibling 1</p>
    <p>Sibling 2</p>
    <!-- 將第三個元素進行處理，建立新的BFC -->
    <div class="newBFC">
        <p>Sibling 3</p>
    </div>
</div>

......

.container {
    background-color: red;
    overflow: hidden; /* creates a block formatting context */
}
p {
    margin: 10px 0;
    background-color: lightgreen;
}
.newBFC {
    overflow: hidden;  /* creates new block formatting context */
}

結果如圖所示：

因爲第二個和第三個元素不屬於同一個BFC，所以不會發生外邊距摺疊。

BFC包含浮動

浮動元素是會脫離文檔流的(絕對定位元素會脫離文檔流)。若是一個沒有高度或者height是auto的容器的子元素是浮動元素，則該容器的高度是不會被撐開的。咱們一般會利用僞元素(:after或者:before)來解決這個問題。
BFC能包含浮動，也能解決容器高度不會被撐開的問題。

<div class="container">
    <div>Sibling</div>
    <div>Sibling</div>
</div>

......

.container {
  background-color: green;
}
.container div {
  float: left;
  background-color: lightgreen;
  margin: 10px;
}

因爲父元素沒有高度，內部元素浮動後脫離父元素，解決方式爲將父元素變爲BFC，解決方式以下：

.container {
    overflow: hidden; //利用overflow：hidden將父元素變爲BFC
    background-color: green;
}

多列布局使用BFC

若是咱們建立一個佔滿整個容器寬度的多列布局，在某些瀏覽器中最後一列有時候會掉到下一行。這多是由於瀏覽器四捨五入了列寬從而全部列的總寬度會超出容器。但若是咱們在多列布局中的最後一列裏建立一個新的BFC，它將老是佔據其餘列先佔位完畢後剩下的空間。

<div class="container">
    <div class="column">column 1</div>
    <div class="column">column 2</div>
    <div class="column">column 3</div>
</div>

......

.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
.column:last-child {
    float: none;
    overflow: hidden; 
}