背景
以前在写html和css的时候，两个div都设置了margin不同的上下值。写完后我开心的打开页面，为毛两个应该隔的比较开的div，距离并不是我设置的margin值。于是我从marigin重合搜索到了BFC,于是我blahblah地看了一通，却没有看的很懂，一知半解的我烦躁的放弃了。
最近突然想深入的了解下css，在看了几篇文章后，里面涉及到了我以前的问题，并从css标准和原理上讲解了，配合上例子，有了种豁然开朗的感觉：原来margin会折叠是这个原因！所以想把这种感觉记录下来，也是一份对这部分知道的总结和巩固。
BFC
1. 定义
块级格式化上下文（block formatting context） 是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。
2. 创建BFC
根元素
绝对定位元素 (position 为 absolute 或 fixed)
float的值不为none
display的值为:inline-block, table-cell, table-captions, flex
overflow的值不为visible
margin折叠
属于同一个BFC的两个相邻Box的margin会发生折
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div {
width: 100px;
height: 100px;
}
.a {
background: lightblue;
margin-bottom: 20px;
}
.b {
background: orange;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
那如何阻止margin折叠呢，只要将其中一个box创建新的BFC就行了。(可以尝试不同创建BFC的方法尝试，代码注释了)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
* {
margin: 0;
}
body {
background: pink;
}
.p {
width: 150px;
height: 150px;
margin-top: 20px;
background: lightblue;
}
.s {
width: 100px;
height: 100px;
margin-top: 30px;
background: orange;
}
.bfc {
overflow: hidden;
/* display: inline-block; */
/* position: absolute; */
/* float: left; */
}
</style>
</head>
<body>
<div class="p">
<div class="s"></div>
</div>
<div class="p bfc">
<div class="s"></div>
</div>
</body>
</html>
BFC清除浮动
在计算BFC元素高度时，浮动元素的高度也会计算进去，所以可以达到清除浮动的效果(可以将下例尝试不同创建BFC的方法来清除浮动)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
* {
margin: 0;
}
.wrap {
width: 80px;
border: 5px solid orange;
}
.a {
width: 80px;
height: 80px;
background: lightblue;
}
.fl {
float: left;
}
.bfc {
overflow: hidden;
/* display: inline-block; */
/* position: absolute; */
/* float: left; */
}
</style>
</head>
<body>
<div class="wrap">
<div class="a fl"></div>
</div>
<div style="clear: both;">
<br>
<div class="wrap bfc">
<div class="a fl"></div>
</div>
</body>
</html>
结束
第一次写这类总结，如果有什么不对的，希望大家和谐交流。
BFC还有一些其他的布局规则，我只写出了我以前疑惑的点，也感谢我参考的几篇文章，下面是链接，大家有兴趣可以深入研究下。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。