以前我也不知道bfc是什么，今天看了才知道原来以前经常接触，只是不知道专业名称罢了。就像闭包、继承一样，以前经常用到，只是不知道而已，今天我就来说一下，css定位之bfc。
bfc与清除浮动是有关系的，那我们就来说说，如何清除浮动，清除浮动主要有两种方法：
①利用 clear属性，清除浮动
②使父容器形成bfc
在讲bcf之前，我要先说一下，我们通常控制元素布局的定位方案主要有3种：普通流 (normal flow) 、浮动 (floats) 和绝对定位 (absolute positioning) 
***普通流(normal flow)
在普通流中，元素按照其在 html 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行， 除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 html 文档中的位置决定。
***浮动 (floats)
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移。
***绝对定位 (absolute positioning)
在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响（而浮动素会影响兄弟元素），而元素具体的位置由绝对定位的坐标决定。
bfc 正是属于普通流的，因此它对兄弟元素也不会造成什么影响。
&&--bfc的定义--&&
在进行盒子元素布局的时候， bfc 提供了一个环境， 在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成 bfc，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也就是说，如果一个元素符合了成为 bfc 的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 bfc)， 是一个隔离了的独立容器。
&&--bfc到底是什么--&&
当涉及到可视化布局的时候，block formatting context提供了一个环境，html元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成bfc，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个bfc就是一个独立的行政单位的意思。
&&--怎样才能形成bfc--&&
①float的值不为none。
②overflow的值不为visible。
③display的值为table-cell, table-caption, inline-block中的任何一个。
④position的值不为relative和static。
⑤css3中flex boxes
&&--bfc的作用--&&
①包含浮动元素(清除浮动)
bfc 会 根据子元素的情况自 适应 高度 ，这个 特性 是 对父元素 使 用overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的
②不被浮动元素覆盖
浮动元素会无视兄弟元素的存在， 覆盖在兄弟元素的上面， 为该兄弟元素创建bfc 后可以阻止这种情况的出现
&&--bfc主要有三个特性--&&
①bfc  会阻止外边距折叠
两个相连的 p 在垂直上的外边距会发生叠加，在实际开发中，或许我们有时会不需要这种折叠，这时可以利用 bfc 的其中一个特性——阻止外边距叠加。阻止父子元素的 margin 折叠，仅当两个块级元素毗邻并且在同一个块级格式化上下文时，它们垂直方向之间的外边距才会叠加。也就是说，即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。同时bfc 的元素，不和它的子元素发生外边距折叠。
②bfc  可以包含浮动的元素
这也正是上面使用 overflow: hidden 与 overflow: auto 方法闭合浮动的原理，使用 overflow: hidden 或 overflow: auto 触发浮动元素父元素的 bfc 特性，从而可以包含浮动元素，闭合浮动。
w3c 的原文是“’auto’ heights for block formatting context roots”，也就是 bfc 会根据子元素的情况自动适应高度，即使其子元素中包括浮动元素。
但是 ie6-7 并不支持 w3c 的 bfc ，而是使用自产的 haslayout 。从表现上来说，它跟 bfc 很相似，只是 haslayout 自身存在很多问题，导致了 ie6-7 中一系列的 bug 。触发 haslayout 的条件与触发 bfc 有些相似，具体情况 kayo 会另写文章介绍。这里 kayo 推荐为元素设置 ie 特有的 css 属性 zoom: 1 触发 haslayout ，zoom 用于设置或检索元素的缩放比例，值为“1”即使用元素的实际尺寸，使用 zoom: 1 既可以触发 haslayout 又不会对元素造成其他影响，相对来说会更为方便。
③bfc  可以阻止元素被浮动元素覆盖
如上面所说，浮动元素的块状兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发 bfc 后可以阻止这种情况的发生。
更多css之bfc(block formatting context) 。