一、什么是BFC
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。Block formatting context直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
二、如何创建BFC
①float为 left|right
②overflow为 hidden|auto|scroll
③display为 table-cell|table-caption|inline-block
④position为 absolute|fixed
三、 BFC有哪些特性
特性1：BFC会阻止垂直外边距折叠
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直margin的重叠，这个包括相邻元素或者嵌套元素，只要他们之间没有阻挡（比如边框、非空内容、padding等）就会发生margin重叠。
①相邻兄弟元素margin重叠问题
<style>
p{
color: #fff;
background: #888;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>ABC</p>
<p>abc</p>
</body>
最后页面如下图展示：
上图两个P元素之间距离应该为200px,然而实际上只有100px,发生了margin重叠。
bug如何修补
只需要在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。
<style>
p{
color: #fff;
background: #888;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
.wrap{
overflow:hidden;
}
</style>
<body>
<p>ABC</p>
<div class="wrap">
<p>abc</p>
</div>
</body>
最后页面如下图展示：
②父子元素margin重叠问题
<style>
.box{
width:100px;
height:100px;
background:#ccc;
}
.wrap {
background:yellow;
}
.wrap h1{
background:pink;
margin:40px;
}
</style>
<body>
<div class="box">box</div>
<div class="wrap">
<h1>h1</h1>
</div>
</body>
最后页面如下图展示：
bug如何修补
方法有很多，在wrap元素中添加:overflow:hidden;或者overflow：auto；使其父元素形成一个BFC；
也可以在wrap元素中添加border：1px solid； 或是padding：1px；这些都可以有效解决父子元素margin重叠问题。
<style>
.box1{
height: 100px;
width: 100px;
float: left;
background: lightblue;
}
.box2{
width: 200px;
height: 200px;
background: #eee;
}
</style>
<body>
<div class="box1">我是一个左浮动的元素</div>
<div class="box2">喂喂喂!大家不要生气嘛，生气会犯嗔戒的。悟空你也太调皮了，
我跟你说过叫你不要乱扔东西，你怎么又……你看，我还没说完你就把棍子给扔掉了!
月光宝盒是宝物，你把它扔掉会污染环境，要是砸到小朋友怎么办，就算砸不到小朋友，
砸到花花草草也是不对的。</div>
</body>
最后页面如下图展示：
特性3：BFC可以包含浮动----清除浮动
我们都知道浮动会脱离文档流，接下来我们看看下面的例子：
<style>
.box1{
width:100px;
height:100px;
float:left;
border: 1px solid #000;
}
.box2{
width:100px;
height:100px;
float:left;
border: 1px solid #000;
}
.box{
background:yellow
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
最后页面如下图展示：
