概述
BFC是块级格式化上下文，它的一个令人熟知的运用是双飞翼布局或者两列布局。但其实它在其它地方也有很巧妙的运用。我把研究的心得记录下来，供以后开发时参考，相信对其他人也有用。
参考资料：
mdn块格式化上下文
为什么BFC可以解决margin叠加问题？
BFC——一个我们容易忽视掉的布局神器
BFC精髓
触发BFC的元素会变成一个独立的盒子，这个独立盒子里的布局不受外部影响，也不会影响到外面的元素！这就是BFC的精髓所在！
常用的触发BFC的方法：
- 设置除 float:none 以外的属性值（如：left | right）。
- 设置除 overflow: visible 以外的属性值（如： hidden | auto | scroll）。
- 设置 display属性值为: inline-block。
- 设置 position 属性值为：absolute | fixed。
解决margin叠加问题
如下面的代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
margin-bottom: 150px;
200px;
height: 200px;
background-color: green;
}
.div2 {
margin-top: 100px;
200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
两个块级元素div1和div2会发生上下边距重叠的情况。但是如果我们把div的display改为inline-block，就不会发生上下边距重叠了。代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
margin-bottom: 150px;
200px;
height: 200px;
background-color: green;
display: inline-block;
}
.div2 {
margin-top: 100px;
200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
其实严格说来，并不是由于display: inline-block;触发了BFC从而使上下边距不叠加的，因为BFC的精髓是：触发BFC的元素会变成一个独立的盒子，这个独立盒子里的布局不受外部影响，也不会影响到外面的元素！而div1的margin-bottom不能算是盒子内部的布局。
那是什么原因导致上下边距不叠加的？
因为W3C官方文档规定，上下边距叠加必须满足2个条件：一个是都是块级元素；另一个是都在同一个BFC里面。参见：w3.org关于margin合并的规范说明
所以我们把div1设置为inline-block之后，它就不是块级元素了，不满足条件1，自然就不会发生上下边距叠加。
解决margin影响父元素问题
我们给父元素的第一个子元素设置margin-top值，就会发现它影响到了父元素的margin值，原因是它和父元素的margin-top值合并了。实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
200px;
height: 200px;
background-color: green;
}
.div2 {
margin-top: 100px;
100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
我们一般是通过设置父元素的padding-top值为1px来解决的。但是利用BFC有更加简便的解决方法，那就是利用overflow: hidden或者overflow: auto，使父元素形成一个BFC，从而它里面的元素不受外面的元素影响，也不会影响外面的元素。实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
200px;
height: 200px;
background-color: green;
overflow: auto;
}
.div2 {
margin-top: 100px;
100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
清除浮动
如下面代码所示，如果我们给子元素加一个浮动，那么子元素就不能撑开父元素了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
200px;
background-color: green;
border: 5px solid red;
}
.div2 {
float: left;
100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
原因是，子元素通过float触发BFC，成为了一个独立的盒子，根据BFC的精髓，它不会影响外部元素，也不会受外部元素影响，所以它不会影响父元素的高度，所以不能撑开父元素。
这个时候，如果给父元素触发BFC，就可以强制把子元素拉到它形成的独立盒子里面（在计算BFC的高度时，浮动元素也参与计算），这样就清除浮动了。而触发BFC最好用的还是overflow: hidden或者overflow: auto。实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
200px;
background-color: green;
border: 5px solid red;
overflow: auto;
}
.div2 {
float: left;
100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
其它
我们在写css的时候，有时会遇到莫名其妙的问题，这个时候可以考虑给元素加一个overflow: hidden或者overflow: auto，使元素触发BFC成为独立盒子，往往能意想不到的解决问题呢！