## 概述 BFC(Block Formatting Context)塊級格式化上下文.BFC就是一個封閉的區域,里面的盒子隨便怎么浮動,對外面的盒子沒有任何影響. BFC是一個獨立的渲染區域,只有Block-level box 參與,它規定了內部的Block-level Box 如何布局,并且與這個區域外部好不想干. 白話文,孩子在家里愿意怎么折騰都行,但是除了家門口,你就乖乖的,不能影響外面的任何人. ## 塊級元素具有BFC條件 不是所有的元素都能產生BFC,W3C規范: display屬性為block,list-item,table的元素,會產生BFC.外面用的最多的就是block .注意其他的,display屬性,比如line等,他們創建的是IFC. 成為BFC的條件是有寬度和高度,有外邊距和內邊距,有邊框. ## 塊級元素觸發BFC的屬性. 不是隨便一個DIV都可以成為BFC.觸發BFC的條件: 滿足下列條件之一就可以了. 1.float的值不為none 2.overflow的值不為visible 3.display的值為table-cell、tabble-caption和inline-block之一 4.position的值不為static,releative. ## BFC元素所具有的特性 1. 在BFC中,盒子從頂端開始垂直的一個接一個的排列. 2. 盒子垂直方向的距離由margin決定,屬于同一個BFC的兩個響鈴盒子的maigin會發生重疊. 3. 在BFC中,每一個盒子的左外邊緣(margin-left) 會觸碰到容器的左邊緣(border-left) (對于從右到左的格式來說,則觸碰到右邊緣). 4. BFC的區域不會與浮動盒子產生交集,而是緊貼浮動邊緣. 5. 計算BFC的高度時,自然也會檢測浮動的盒子高度. ## BFC的用途 1. 清除元素內部浮動:只要把父元素設為BFC就可以清理子元素的浮動了,最常見的用法就是在父元素上設置overflow:hidden樣式,對于IE6加上zoom:1就可以了. (計算BFC高度時,自然會檢測浮動你那個盒子高度). 這時給父盒子創建BFC區域就可以了. 2. 解決外邊距合并. 3. 制作右側自適應的盒子問題.(BFC的區域不會與浮動盒子產生交集,而是緊貼浮動邊緣,右側盒子由于沒有寬度,左側盒子寬度增加,不影響右側盒子)  ## 總結