BFC，Block Formatting Context的缩写，块级格式化上下文。会在页面上形成一个独立的渲染区域。
产生BFC的条件：
1、float不等于none
2、overflow不等于visible。
3、position为fixed或absolute。
4、display为inline-block,table-caption,table-cell中值的一个。
先看一个实例：
image.png
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>CSS中的BFC</title>
<meta charset="utf-8">
<style type="text/css">
.container {
width: 300px;
height: 300px;
background: red;
}
.box1 {
width: 100px;
height: 100px;
background: green;
margin: 10px 0;
}
.box2 {
width: 100px;
height: 100px;
background: yellow;
margin: 30px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
可以看到box1和container的那个盒子上边发生重叠。（原因：一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。）
但是，如果给container样式加上overflow:hidden。也就是说，产生了BFC，形成了一个独立的渲染区域后，效果如下。
image.png
样式如下：
.container {
width: 300px;
height: 300px;
background: red;
overflow: hidden;
}
可以看到现在达到我们想要的效果了。因为是父元素container为一个独立的渲染区域了。容器里面的子元素不会影响外面的元素。）
