css面試點-BFC（塊級格式化上下文）與常見佈局方案

定位方案

常見的定位方案，定位方案是控制元素的佈局，有三種常見方案:

• 普通流 (normal flow)

在普通流中，元素按照其在 HTML 中的前後位置至上而下佈局，在這個過程當中，行內元素水平排列，直到當行被佔滿而後換行，塊級元素則會被渲染爲完整的一個新行，除非另外指定，不然全部元素默認都是普通流定位，也能夠說，普通流中元素的位置由該元素在 HTML 文檔中的位置決定。

• 浮動 (float)

在浮動佈局中，元素首先按照普通流的位置出現，而後根據浮動的方向儘量的向左邊或右邊偏移，其效果與印刷排版中的文本環繞類似。

• 絕對定位 (absolute positioning)

在絕對定位佈局中，元素會總體脫離普通流，所以絕對定位元素不會對其兄弟元素形成影響，而元素具體的位置由絕對定位的座標決定。

什麼是BFC:

• BFC是一個獨立的佈局環境，其中的元素佈局是不受外界的影響，而且在一個BFC中，塊盒與行盒（行盒由一行中全部的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。
• 能夠把 BFC 理解爲一個封閉的大箱子，箱子內部的元素不管如何翻江倒海，都不會影響到外部。
• 浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks table-cells 和 table-captions），以及overflow值不爲visiable的塊級盒子，都會爲他們的內容建立BFC（塊級格式化上下文）。

BFC觸發條件：

　　【1】根元素，即HTML元素

　　【2】float的值不爲none

　　【3】overflow的值不爲visible (overflow的其餘值：hidden、auto、scroll)

　　【4】display的值爲inline-block、table-cell、table-caption、flow-root、flex或者inline-flex

　　【5】position的值爲absolute或fixed

BFC佈局規則：

1.內部的Box會在垂直方向，一個接一個地放置（不設置浮動，設置浮動那確定是左右一行排列了）。

2.Box垂直方向的距離由margin決定。屬於同一個BFC兩個相鄰Box的margin會發生重疊（正常的不設置浮動，兩個塊元素margin重疊,僅僅是垂直方向，左右不是這個樣子的），會發生外邊距合併，指的是當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

3.每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。（不設置浮動，不設置左邊距，塊級子元素，一概靠左豎直向下排列，內聯子元素一概從左向右排列，想一想，正常寫代碼，都是這樣，設置左浮動的靠近父元素的左邊，設置右浮動，靠近父元素的右邊。）

4.BFC的區域不會與float盒子重疊。BFC區域的子元素不受外面的影響，外面的也不受BFC區域裏面的影響（這個挺重要的，設置的浮動的元素，脫離了文檔流，正常的相鄰的元素會跑到它下面（靠左）。設置成BFC，本身獨成一塊，不會跑到它下面，本身依然佔一塊。）

5.計算BFC的高度時，浮動元素也參與計算（就是子元素設置浮動，脫離文檔流，父元素高度塌陷，給父元素設置BFC，那麼父元素高度就不會忽略浮動的子元素，從而高度就不會塌陷，這樣理解，好像是BFC又把脫離文檔流的元素，又拉回來了，但保持了浮動的特色。）

BFC主要用途：

外邊距摺疊

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

.container {
  background-color: red;
  overflow: hidden;
}
p {
  background-color: lightgreen;
  margin: 10px 0;
}複製代碼

​

在上圖中，一個紅盒子（div）包含着兩個兄弟元素（p），一個BFC已經建立了出來。
理論上，兩個p元素之間的外邊距應當是兩者外邊距之和（20px）但實際上倒是10px，這是外邊距摺疊(Collapsing Margins)的結果。
產生摺疊的必備條件：margin必須是鄰接的。

在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。

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

利用BFC避免外邊距摺疊

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

.container {
  background-color: red;
  overflow: hidden;
}
p {
  background-color: lightgreen;
  margin: 10px 0;
}
.container1{
  overflow: hidden;
}複製代碼

由於第一個和第二個P元素如今分屬於不一樣的BFC，它們之間就不會發生外邊距摺疊了。

​

BFC清除浮動

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

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

.container {
    background-color: blue;
    overflow: hidden; // 添加後才能實現BFC，才能包住浮動元素
}
.container div {
    float: left;
    background-color: lightgreen;
    margin: 10px;
}複製代碼

未添加overflow: hidden

​

添加overflow: hidden

​

阻止元素被浮動元素覆蓋

<div style="height: 100px;width: 100px;float: left;background: lightblue">
    我是一個左浮動的元素 one
</div>
<div style="width: 200px; height: 200px;background: grey">
    我是一個沒有設置浮動,也沒有觸發 BFC,我想你此次只是生氣時間久了一點，是的。
</div>

<div style="height: 100px;width: 100px;float: left;background: lightblue">
    我是一個左浮動的元素 two
</div>
<div style="width: 200px; height: 200px;background: grey;overflow:hidden">
    我是一個沒有設置浮動,觸發 BFC 元素,我想你此次只是生氣時間久了一點，是的。
</div>複製代碼

因爲左側塊級元素髮生了浮動，因此和右側未發生浮動的塊級元素不在同一層內，因此會發生div遮擋問題。能夠給右側元素添加 overflow: hidden，觸發BFC來解決遮擋問題。

​​