前端7班+余愿
鉴于我对BFC的理解难度，我觉得有必要把我的理解过程记录并保存下来，以后忘了可以随时来翻翻，也可以为跟我一样的前端小白做一个小的参考（虽然我也并没有完全理解透彻。。。）。
首先，什么是BFC。w3c上面的解释是一串英文，我们直接看翻译过来的。。。翻译过来是：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。
在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。
在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。
这种概念类的解释文字，肯定不好理解，因为我自己就不理解。查资料看别人的理解用通俗易懂的话来讲就是3点，首先得明白BFC有什么作用，就是我们想要用BFC实现什么样的效果。
BFC的作用：
1，用来清除浮动。
2，用来布局
3，解决margin叠加问题。
明白了BFC有什么作用之后，再来想如何生成BFC。满足以下任何一点，都可以生成bfc：
1，float 除了none以外的值
2，overflow 除了visible 以外的值（hidden，auto，scroll ）
3，display (table-cell，table-caption，inline-block, flex, inline-flex)
4，position值为（absolute，fixed）
5，fieldset元素（这是一个html标签，它将表单内容的一部分打包，生成一组相关表单的字段。）
知道这些之后，也需要知道以下BFC的特性：
1，内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2，Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
3，每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4，BFC的区域不会与float box叠加。
5，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6，计算BFC的高度时，浮动元素也参与计算。
基本上了解这么多，就能简单的用一用BFC了，如果还要深入了解，可以多翻翻资料多多练习~
文章参考链接：http://dyygtfx.com/3942.html
