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當中，相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，並且因而所結合成的外邊距稱爲摺疊外邊距。

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

利用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來解決遮擋問題。