1.背景介绍

什么是BFC

Block Formatting Context，中文直译为块级格式上下文。
BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。 两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。

这里也间接指出了垂直相邻盒子margin合并的解决办法：就是给这两个盒子也创建BFC。

通俗一点，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

2.知识剖析

BFC的作用

1. 清除内部浮动
我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。

2. 垂直margin合并
在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 折叠的结果：
  两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  两个外边距一正一负时，折叠结果是两者的相加的和。这个同样可以利用BFC解决。

3. 创建自适应两栏布局
在很多网站中，我们常看到这样的一种结构，左图片+右文字的两栏结构。

                    
                        //CSS
                        *{
                            margin: 0;
                            padding: 0;
                        }
                        .box {
                            width:300px;
                            border: 1px solid #000;
                        }
                        .img {
                            float: left;
                        }
                        .info {
                            background: #f1f1f1;
                            color: #222;
                        }
                        //HTML
                        

                                
                                
信息信息信息信息信息信息
                        
                    
                

如何创建BFC

• float属性不为none
• overflow不为visible(可以是hidden、scroll、auto)
• position为absolute或fixed
• display为inline-block、table-cell、table-caption

                    
                        .container{
                            margin: 30px auto;
                            width:600px;
                            height: 300px;
                            clear: both;
                        }
                        .p{
                            border:solid 3px #a33;
                        }
                        .c{
                            width: 100px;
                            height: 100px;
                            background-color: #060;
                            margin: 10px;
                            float: left;
                        }
                        .floatfix{
                            zoom:1;
                        }
                        .floatfix:after{
                            content:"";
                            display:table;
                            clear:both;
                        }
                    
                

自适应两栏布局

上面中的例子我们可以看出，每个元素的margin box的左边与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此

因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

Block Formatting Context在产生什么作用

1.Block Formatting Context可以阻止边距折叠（margin collapsing）。

2.Block Formatting Context可以包含内部元素的浮动。

其实以上的几个例子都体现了BFC布局规则第五条：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。 避免margin重叠也是这样的一个道理。