【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的区域不会与浮动盒子产生交集，而是紧贴浮动边缘