【CSS】BFC

1 BFC是什麼

block formation context 塊級格式化上下文，它就是頁面的一個隔離的獨立容器，容器裡面的元素不會影響到外面的元素。這個特性可以很好地幫助我們進行頁面布局。

2 觸發BFC的情況

1）float:不為none的情況
2）position:為absolute,fixed的情況
3）display:flex inline-flex table-cell table-caption inline-block block list-item
4)overflow:不為visible的情況
           

3 BFC特性

1）	在BFC中，從盒子頂部開始一個個垂直排列 
2）	盒子垂直方向上的間距有margin決定，屬于同一個BFC的兩個相鄰盒子的margin會發生重疊
3）	在BFC中，每個盒子的左外邊緣會觸碰到容器的左邊緣
4）	BFC的區域不會與浮動的盒子産生交集 而是緊貼着浮動的邊緣
5）	計算BFC高度時，也會計算浮動的盒子的高度
           

4 BFC的主要用途

BFC的主要用途：
1）	清除元素内部浮動：隻要把父元素設為BFC就可以清理子元素的浮動了，最常見的是在父元素上添加overflow:hidden樣式，對于IE6加上zoom:1就可以了，主要用到的特性：計算BFC盒子高度時，自然也會檢測浮動的盒子高度
2）	解決外邊距合并問題：主要用到的特性：盒子垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰盒子的margin會發生重疊，那麼我們建立不屬于同一個BFC，就不會發生margin重疊了
3)	制作右側自适應的盒子問題：用到的特性：BFC的區域不會與浮動盒子産生交集，而是緊貼浮動邊緣