BFC的定义
block format context块级格式化上下文，指形成一个封闭空间，空间里面的元素与外面的元素互相之间不会产生影响
形成BFC的条件
- html根元素（甚至可以把每个形成的BFC都理解成一个新的根元素）
- float的值不为none
- 浮动元素本身就可以BFC化，但是因为自身具有破坏性和包裹性，失去了元素本身的自适应流体特性，所以无法用来实现自动填满容器的自适应布局。不过由于它的兼容性比较好，所以在以前的“堆积木布局”上派上了很大的用场
- overflow的值不为visible
- 这个常用来作为形成BFC的条件，因为它的兼容性也比较好，唯一的缺点就是这个属性本身的含义，超出部分会被隐藏，但是这种交互场景出现的比例不是很高，所以算是一个做为可以形成BFC的优良条件
- display的值为table-cell、inline-block中的任意一个
- inline-block：当元素设置为inline-block的时候，元素也会呈现为包裹性，但是在IE6余IE7会呈现为block的形式（即使很少用到），所以在这两个浏览器下，设置inline-block形成BFC是一个很好的选择
- table-cell：设置了table-cell的元素会根据内部元素的宽度进行显示，但是由于单元格自身的特性-宽度设置的再大也不会超过表格容器的宽度，当我们为table-cell的元素设置一个足够宽的宽度，那么它也会呈现block水平的流动特性了。（缺点：应付英文字符有些吃力
word-break:break-all）- position的值不为relative与static
BFC的作用
- BFC可以用来清除浮动的影响（父级塌陷问题与垂直方向高度重叠的问题都可以解决）
- BFC可以解决margin合并的问题（将每一个BFC都想像成一个html根元素）
- 用来增强流体的自适应布局
- 由于自身的封闭性，使得形成了BFC的元素更健壮，容错性更强。比如BFC元素外边设置了浮动元素，BFC里面的元素设置了clear，无法对BFC的外面产生影响
把握好BFC的形成条件与产生的作用，可以为我们解决css问题多提供了一条思路
