CSS布局基础——BFC

what's BFC?

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

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

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是折叠的。

这句描述是否是超级熟悉，这不是我css常见的边距折叠问题吗？如今知道它出自哪里了吧，就是这里。下面的俩个盒子各有上下20px的间距，加起来应该有40px,但显然，如今只有20px;

<style>
.top{
    width:100px;
    height:100px;
    background:#000;
    margin:20px 0;
}
.bottom{
    width:100px;
    height:100px;
    background:#000;
    margin:20px 0;
}
</style>
<div  class="top"></div>
<div  class="bottom"></div>

发生边距折叠是由于同一个BFC的关系(根BFC)。既然知道缘由，解决就好办了，让他们俩个不在同一个BFC就ok啦。

3. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

经过这条属性，咱们又能够想到哪些呢。对，浮动元素的塌陷问题。咱们知道，一个元素中的子元素浮动了，这个父元素就会发生高度塌陷问题。下例中一旦内部的红色元素浮动，蓝色的盒子就没法被撑起，高度会变成0。

<style>
.wrap{
    width:150px;
    background:#ADD9E6;
    margin:20px 0;
}
.in{
    width:100px;
    height:100px;
    background:#FFCCCC;
    margin:20px 0;
    //float:left;
}
</style>
<div class="wrap"><div class="in"></div></div>

如今咱们知道了，这是由于浮动元素建立了一个新的BFC，成为了一个独立的容器，不会影响到外面的父元素了。它的定位规则再也不受制于这个父元素了。如何解决这一问题？咱们知道只要在在父元素加上overflow:hidden能够清除浮动。可是这又是为何？

其实，这就是前面提到的overflow:hidden能够生成一个新的BFC，而这个浮动的子元素，被它所包含了，从而成为一个独立容器，它的float外溢不了了，外面的元素再也不受其浮动的影响，从而达到了清除浮动的做用。