前几天在园子里看文章的时候看到了BFC这个概念，对于小白的我来说那是相当的陌生，于是就百度了一下。结果还是有很多的，看来并不算是一个冷僻的知识。于是来总结一下搜索到的一些结果和理解。
那么，什么事BFC呢？BFC是块级格式化上下文（Block Formatting Context）的简写，用来规范块级容器的布局方式。主要的特性是有以下几点：
1.隔绝空间。使BFC内外的布局不会相互影响（个人猜测，在写一些ui控件的时候是不是应该将嘴歪层设置一个BFC，希望哪位大神给讲解一下）
2.BFC内的元素从上至下一次排列，尽可能的高级上方(同级元素在垂直方向上的margin会存在塌陷，这个问题以前经常碰到，一直认为是个bug)，水品方向的排列
方向由你的水平对齐方式决定，子元素的margin和紧贴着BFC的border
3.BFC的区域不会同浮动元素的区域叠加
4.BFC的区域在计算高度时会计算其内浮动元素的高度
说了这么多的特性，那么怎样去建立一个BFC呢？从w3c的介绍里可以得到：
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
大概的意思是：浮动元素，绝对定位元素，非块级盒子的块级容器（如inline-block,table-cells,以及table-caption）和overflow不为visible的块级盒子都会为其子元素建立一个BFC。用代码就是：
float:left|right;
position:absolute|fixed;
display:inline-block|table-cells|table-captions;
overflow:hidden;
那么还有一个问题要注明是非块级盒子的块级容器呢？既然是块级格式化上下文，为什么不包含块级盒子？我的理解是，在一个页面中，以块级盒子居多，特别是div+css布局的时候，整个页面可能有上百个块级盒子，这样整个页面就被分成了上百个BFC。由于BFC有内外隔离的特性，反而会导致布局上更加困难？
讲了一大堆的理论，到底BFC有什么用？能解决什么问题？这个才是我们最关注的东西（俗话说，不能解决问题的理论都是扯**蛋）。我知道的就是两个，其他的欢迎大家来补充：
1.清楚浮动
根据 BFC的区域在计算高度时会计算其内浮动元素的高度 以及 BFC隔绝内外布局 的特性（我猜的…）可以知道，当BFC内有浮动元素并且浮动元素的高度高于其他所有元素时，BFC的高度等于浮动元素的高度。为了方便说明，来上个图吧
这张是在未创建BFC时的状态，对应的代码是：
<head>
<meta charset="utf-8">
<title>BFC</title>
<style>
.bfc{ margin: 100px 0;background: #777;overflow: hidden; }
.float{ float: left;width: 100px;height: 200px;background: green;opacity: .6;color: white; }
.default{ width: 300px;height: 100px;background: red; }
</style>
</head>
<body>
<div class="bfc">
<div class="float">float</div>
<div class="default">default</div>
</div>
</body>
可以看到，外层的.bfc的高度等于.default的高度，浮动元素并未被计算在内，导致了高度的塌陷。
再来看看这张，在外层.fbc上创建了BFC之后的效果
.bfc{ margin: 100px 0;background: #777;overflow: hidden; }
此时，浮动呗清除，.float的高度被计算在.bfc内。以前一直不明白为什么overflow可以清除浮动，其实就是因为BFC的帮助。
2.解决子元素与父元素间margin失效的问题
先看下面这段代码
1 <head>
2 <meta charset="utf-8">
3 <title>BFC</title>
4 <style>
5 .bfc{ width: 200px;height:200px;margin: 10px auto; background: #ddd}
6 .bfc>div{ width: 100px;height:100px;margin:50px;background: green }
7 </style>
8 </head>
9 <body>
10 <div class="bfc">
11 <div></div>
12 </div>
13 </body>
你觉得效果是什么？这样吗？
咋一看好像是的，但是结果呢？
这个才是正确答案，为什么？我们从BFC的特性中去看看。BFC中的元素在垂直方向上会尽可能的往上方贴近，于是子元素的margin-top紧贴着父元素的border-top，导致父子元素之间的margin消失了。这个问题我在以前经常碰到，当时的解决方案是用padding代替margin，但是还是会有一些小问题，比如我想给子元素一个border-bottom,但是border-bottom的宽度会贯穿整个父元素。最后的替代解决方案是父元素使用用margin和padding，而子元素什么都不设置。在看完BFC之后明白，只要在父元素上设置overflow：hidden为其创建BFC之后问题就解决了。
好了。我所了解的BFC就是这样的，可能还有很多特性我不知道，再次欢迎高手指正。
看一下时间… 写了1个多小时，看看文章好像并不长的样子。应该是第一次写的原因吧！！休息一会，可以吃午饭了。