前端知識總結--BFC

Block Formatting Context，中文直譯爲塊級格式上下文。

1. BFC的定義

是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。

在建立了 Block Formatting Context 的元素中，其子元素會一個接一個地放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰的元素之間的垂直距離取決於 ‘margin’ 特性。在 Block Formatting Context 中相鄰的塊級元素的垂直邊距會摺疊（collapse）。

在 Block Formatting Context 中，每個元素左外邊與包含塊的左邊相接觸（對於從右到左的格式化，右外邊接觸右邊）， 即便存在浮動也是如此（儘管一個元素的內容區域會因爲浮動而壓縮），除非這個元素也建立了一個新的 Block Formatting Context 。

從上面的定義咱們能夠看到Document顯示HTML元素的方式和BFC的定義很像，其實咱們能夠認爲Document就是最大的一個擁有BFC的元素了。

2. BFC究竟是什麼？

當涉及到可視化佈局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照必定規則進行佈局。一個環境中的元素不會影響到其它環境中的佈局。好比浮動元素會造成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。這裏有點相似一個BFC就是一個獨立的行政單位的意思。一個大的行政單位能夠包含若干個小的行政單位。

3. 怎樣才能造成BFC

• float的值不爲none。
• overflow的值不爲visible。
• display的值爲table-cell, table-caption, inline-block中的任何一個。
• position的值不爲relative和static。

4. BFC的做用

1. 清除內部浮動

咱們在佈局時常常會遇到這個問題：對子元素設置浮動後，父元素會發生高度塌陷，也就是父元素的高度變爲0。解決這個問題，只須要把把父元素變成一個BFC就好了。經常使用的辦法是給父元素設置overflow:hidden。

2. 垂直margin合併

在CSS當中，相鄰的兩個盒子的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。
摺疊的結果：

• 兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。
• 兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。
• 兩個外邊距一正一負時，摺疊結果是二者的相加的和。
  這個一樣能夠利用BFC解決。關於原理在前文已經講過了。

3. 建立自適應兩欄佈局

在不少網站中，咱們常看到這樣的一種結構，左圖片+右文字的兩欄結構。

<div style="overflow:hidden;border: solid 1px;">
        <div style="background: cadetblue;float:left;width:200px;height:200px;margin: 10px;"></div>
        <div style="background: wheat;overflow:hidden;margin: 10px;padding: 10px;">
            &nbsp;&nbsp;&nbsp;&nbsp;In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
            <br/>
            &nbsp;&nbsp;&nbsp;&nbsp;In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
        </div> 
    </div> 

效果如圖：