1、BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响；
2、可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题；
3、可以将BFC想象成一个工具，无需探究其定义，只要着重理解其功能（特性）即可。
二、BFC有什么用？
BFC的触发条件
1、根元素（<html>）
2、float值非none
3、overflow值非visible
4、display值为inline-block、table-cell、table-caption、flex、inline-flex
5、position值为absolute、fixed
BFC的特性
1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
2、计算BFC高度时浮动元素也参于计算（重点）
3、BFC的区域不会与浮动容器发生重叠（重点）
4、BFC内的容器在垂直方向依次排列
5、元素的margin-left与其包含块的border-left相接触
6、BFC是独立容器，容器内部元素不会影响容器外部元素
BFC功能总结
1、可以利用BFC解决两个相邻元素的上下margin重叠问题；
2、可以利用BFC解决高度塌陷问题；
3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。
前端程序员在布局页面时，经常会遇到各种烦人的小问题，比如：每个元素都是一个盒子，盒子外的父元素应该不会受到盒内子的子元素影响，可是事实是这样的吗？
往往，我们会看到子元素浮动后，父元素高度没有了，两栏布局时右侧没有自适应，垂直方向上上下两个元素外边距不太对
从常理上来说，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此，那么有没有什么办法能让里面的元素和外部真正隔离开呢？
==> 解决办法就是：BFC
BFC = Block Formatting context 意思是“块级格式化上下文”，W3C的解释是：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。
其实，我们只要记住：BFC的目的就是：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。如何才能形成这样一个神奇的空间呢？我们通过CSS为元素设置一些属性，就能触发，常用的有四种：
在知道触发规则之后，我们再来看下能解决什么问题呢？
触发了BFC的容器就是页面上的一个完全隔离开的容器，容器里的子元素绝对不会影响到外面的元素，为了保证这个规则，触发了BFC的父元素在计算高度时，不得不让浮动的子元素也参与进来，变相的实现了清楚内部浮动的目的。
但有的时候出于布局需要也可能无法给父元素设置这些属性，解决高度坍塌还有让父元素也浮动起来，或添加一个高度，但这种适用于已知道子元素高度
垂直方向上两个兄弟元素外边距会取最大值，而不是取和，那么我们可以通过触发BFC来防止他们之间相互影响。为其中一个元素的外边包裹一层父元素，并且触发父元素BFC，比如：overflow：hidden，这样打破原有格局，就不再会重叠啦！
另外我们可以用padding来代替marging，有点是简单易懂，缺点是如果根据设计本来就需要设置padding样式，那就没办法用了
