CSS布局基础BFC

 BFC是什么？

第一次看到这个名词，我是拒绝的，css什么时候还有这个东西？于是迫不及待的google了一下，才发现原来它无时无刻不在我们的css当中，只不过它并不是一个属性，不需要我们平常使用手写罢了。但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局 BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

看一大堆文字可能有点抽象，现在拿个js函数来比喻说明一下吧，我们现在有一个叫做bfc的函数，而一个函数就是一个块级作用域，这里面所有的变量申明、运行都在这个块级作用域内进行。理所当然，一个环境中的变量不会影响到其它环境变量。

CSS Code复制内容到剪贴板

 var box =1;   
function bfc(){   
    var box = "2";   
    console.log(box);   
}   
bfc();//2   
console.log(box)//1   

所以，我们是不是可以这样理解：所谓的BFC就是css属性的执行域？
 
BFC的生成
 
既然js可以通过函数等方法来实现块级作用域，我想那css肯定也是可以通过一些手段来实现BFC的。
 这里BFC的官方文档写到：
 
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
 
从这段描述可以清楚知道，以下方法可以创建一个新的块级执行上下文（BFC）：

 1.浮动元素、
 2.绝对定位元素，
 3.块级元素以及块级容器(比如inline-block、table-cell、table-capation)
 4.overflow值不为visible的块级盒子
 
当然，root元素会自动生成一个BFC，这个应该很好理解,毕竟需要一个根BFC来布局
 
执行规则
 
既然存在了执行环境，那肯定会存在执行规则。BFC的
 
1.在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的。每个盒子的左外边是触碰到包含块的左边的（对于从右向左的排版，则相反）
 
这个应该不难理解。就是我们如果在里写几个<div>，它会依次垂直排列，并且都是在页面的最左边（对于从右向左的排版，则相反）。
 
2.相邻两个盒子之间的垂直的间距是被margin属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。