A. 對BFC的理解
1、BFC全稱Block Formatting Context ，中文直譯為塊級格式上下文。它是 W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。
通俗的來說：BFC是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子內部的元素不會影響到外部。即BFC中的元素的布局是不受外界的影響（ 我們往往利用這個特性來消除浮動元素對其非碼伍浮動的兄弟元素和其子元素帶來的影響。 ）並且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。
2、BFC布局規則
@1. 在BFC下，內部的Box會在垂直方向，一個接一個地放置。
@2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box 的margin會發生重疊
@3. 在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣），即使存在浮動也是如此。
@4. BFC的區域不會與float box重疊。
@5. 計算BFC的高度時，浮動元素也參與計算
觸發 BFC 的條件如下：
浮動元素，float 除 none 以外的值
絕對定位元素，position（absolute，fixed）
display 為以下其中之一的值inline-block, table-cell, table-caption, flex,inline-flex
overflow 除了 visible 以外的值（hidden，auto，scroll）
三.BFC的應用
1.解決浮動塌陷問題
效果如上圖絕模鋒，可見如果父元素只包含浮動元素，且父元素未設置高度和寬度的時候，那麼它的高度就會塌縮為零。解決這種問題，可以為其父元素創建 BFC。
2、自適應兩欄布局
我們還可以運用BFC可以阻止元素被浮動元素覆蓋的特性來實現自適應兩欄布局。
如果我們需要將黑色區域撐到紅色並晌的左邊，就需要利用規范的第四條：
BFC的區域不會與float重疊：
這時候左欄寬度固定，右欄寬度會隨著瀏覽器寬度的調整而調整，從而實現一個自適應兩欄布局。