最近实在是很郁闷。因为越发的感觉有些东西，有时候我们很少用或者是没有意识的去用的时候，就会忘记，比如BFC，这个概念我很早之前就看过，但是
经常的自己还是会忘记，这就是我目前学习碰到的问题了，没有意识到技术点，用或者不用自己不会考虑很多，所以好记性不如烂笔头，自己还是得总结一下。
思考： 1，BFC是什么？
2，BFC 的特性是什么？
3，BFC如何触发？
让我们看看标准的答案：
1： Block Formatting Contexts 即块级格式化上下文，其中 Formatting Context 是一个决定如何渲染文档的容器
Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
最常见的Formatting context有Block fomatting context(BFC)和Inline formatting context(IFC)。CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC。
我个人理解是：BFC其实是一个容器或者说区域，在这个区域之中的元素按照它特有的规律进行布局，而浏览器对其渲染也有一套规则。
2： ->属于同一个bfc的两个垂直相邻的box 的margin会重叠。比如上面的盒子margin :20px; 下面的盒子也是margin:20px 但是两个盒子之间的距离本应该是40px才是，可是实际上我们可以看到二者会重叠，且重叠规则是向margin大的一方靠拢。
->计算BFC高度时，浮动元素也参与计算。这个理解呢，我们知道当一个子元素浮动时可能会造成父级元素的高度坍塌，这个时候我们可以在在父级元素触发BFC，让父级元素重新包裹住。代码如下：
<style>
#father{
border: 1px solid red;
400px;
background: blue;
margin:20px;
overflow: hidden;
}
#son{
border: 1px solid blue;
200px;
height: 200px;
background: palegreen;
margin:20px;
float: left;
}
</style>
<body>
<div id="father">
<div id="son">
</div>
</div>
</body>
->BFC的区域不会与float box重叠。我们知道，当上面的盒子浮动时，会覆盖住下面的盒子，这时候我们只要触发下面盒子的BFC就可以避免这样的情况了。代码如下：
#shang{
border: 1px solid red;
400px;
height: 200px;
background: blue;
margin:20px;
float: left;
}
#xia{
border: 1px solid blue;
200px;
height: 200px;
background: palegreen;
margin:20px;
overflow: hidden;
}
</style>
<body>
<div id="shang">
</div>
<div id="xia">
</div>
</body>
3，那么如何触发BFC呢？
上面我使用了 overflow:hidden;
其实还有这几个方式：
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
因为自己平时碰到的场景不多，实在是萌新，所以也就把常用常见的写上来。本来想把代码放到别的平台，这样阅读起来可以点击查看demo ，奈何现在的平台很多都并不稳定，
考虑时间精力也就作罢，以后一定还是得有自己的博客网站才好。