1.BFC的定义:BFC(block formatting context,中文常译为块级格式化上下文)是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在进行盒子元素布局的时候，BFC 提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成 BFC，浮动元素内部子素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。
2.形成BFC的条件(符合以下任一条件即可):
(1).float的值不为none。
(2).overflow的值不为visible。
(3).display的值为table-cell, table-caption, inline-block中的任何一个。
(4).position的值不为relative和static。
3. BFC 常见作用
(1).BFC会根据子元素的情况自适应高度 ，这个特性是对父元素使用overflow:hidden/auto/scroll、float:left/right 样式可以闭合浮动的原理。
例:
<div style="border:1px solid red;overflow:hidden;500px;">
<div style="float:left;background:black;">我的父元素是 BFC</div>
</div>
该div 使用overflow: hidden创建了BFC ，可以包含浮动元素，因此能正确表现出高度，其边框位置也是正常的。
<div style="border:1px solid blue;500px;">
<div style="float:left;background:yellow;">我的父元素不是 BFC</div>
</div>
该div 出现了“高度塌陷”，这是因为内部的浮动元素脱离了普通流，因此该div相当于一个空标签，没有高度和宽度，即高度为 0，上下边框也重叠在一起。
(2).阻止父子元素的 margin 折叠--------------------经常遇见，重点关注！
即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。
例:
<div style="margin-top:30px;background:red;300px;">
<div style="margin-top:30px;">
我的上外边距是 20px，父级元素不是 BFC
</div>
</div>
<div style="margin-top:30px;background:blue;overflow:auto;300px;">--------------overflow:auto;是关键
<div style="margin-top:30px;">
我的上外边距是 20px，父级元素是 BFC
</div>
</div>
上述 div 元素都有顶部外边距，但第二个div的边距没有与它的子元素的外边距折叠。这是因为第二个div创建了新的BFC。
(3).不被浮动元素覆盖
浮动元素会无视兄弟元素的存在，覆盖在兄弟元素的上面，为该兄弟元素创建BFC 后可以阻止这种情况的出现。
例:
<div style="float:left;200px;height:50px;background:red;">
我是浮动元素
</div>
<div style="200px;height:80px;background:blue;color:white;">
我是非浮动元素，并且没有创建 BFC
</div>
<div style="float:left;200px;height:50px;background:red;">
我是浮动元素
</div>
<div style="200px;height:80px;background:#30F;color:white;display:inline-block;">
我是非浮动元素，创建了 BFC
</div>
蓝色背景的元素通过 display:inline-block 创建了 BFC，则浮动的兄弟元素就不覆盖在该元素上面了。(个人觉得clear可以达到同样效果)
以上就是一些对BFC的认识和看法，感觉学得越多，不懂的越多--！慢慢来吧。