CSS之BFC

    Formatting Context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，他决定了子元素将如何定位，以及和其他元素的关系和相互作用。现代浏览器支持四个Formatting Context：Block Formatting Context (简称BFC),Inline Formatting Context (简称IFC),GridLayout Formatting Context (简称GFC)和Flex Formatting Context (简称FFC)。

    今天我们来看看BFC, BFC即块级格式化上下文。

    有哪一些元素可以生成一个BFC?

    1. 根元素；

    2. float属性不为none;

    3. position属性为absolute和fixed;

    4. 不为块级元素的块级容器，比如display属性为inline-block,table-cell,table-caption,flex；

    5. overflow属性不为visible

    BFC的布局规范

  1. BFC内部box会在垂直方向，一个一个的排列；

    2. BFC的垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会折叠；

    3. 每个元素的左边与包含的盒子的左边相接触(这适应从左到右格式化，否则相反)，即使存在浮动也是这样；

    4. BFC的区域不会与float重叠；

    5. BFC就是一个隔离的独立容器，容器内的元素不会影响到外部的元素，反之一样；

    6. 计算BFC的高度时，BFC内的浮动元素也参与计算

    为了直观的理解上面所说的BFC特性，我们使用代码来讲述。

   Demo1:

    HTML:

<div class="test"></div><div class="test"></div>

   CSS:

.test {height:50px;margin:50px 0;background-color:red;}

    我们可以看到上下两个div直接的margin合并了，这是因为两个div都属于根元素所建立的BFC中，符合BFC布局规范的第2点。

    如果我们将HTML代码改为如下：

<div class="test"></div><div style="overflow:hidden"><div class="test"></div></div>

    

    这个时候两个div之间的上下margin没有在合并，这是因为div使用overflow:hidden产生了一个新的BFC。

    Demo2:

    HTML:

<div class="left"></div><div class="right"></div>

    CSS:

.left{float:left;background-color:red;width:100px;height:50px;}.right{background-color:black;height:100px;}

 如果我们给第二个div增加overflow:hidden的话，div就会生成一个新的BFC,这个时候又会变成什么样呢?这个时候会变成如下所示，红色div固定宽度，黑色div自适应。符合以上所述的BFC布局规范的第4点。

    
    Demo3:

HTML:

<div class="container"><div class="inner"></div></div>

CSS:

.inner{float:left;height:200px;width:200px;background-color:red;}

    内层div我们设置了高度为200px，外层div我们没有设置，这个时候debug我们可以看到外层div的高度为0

    如果我们要想外层div的高度和内存div一样高，我们可以增加css:

.container{overflow:hidden;}

    这个时候外层div生成了一个BFC，所以它的高度回合内层div的高度一样了。符合以上所述BFC布局规范的第6点。