一、前情概览
1.1、常规流：块盒以及可能会产生的问题
- 水平方向上，撑满整个包含块宽度，垂直方向上，依次排序。
- 垂直方向上相邻的元素，
margin会合并。 - 父子关系的情况下，可能会产生
margin塌陷。 - 父子关系的情况下，
父元素无视浮动元素会产生高度坍塌。 - 兄弟元素之间，正常元素可能会
被浮动元素覆盖，即兄弟关系正常元素可能被浮动元素覆盖。（正常元素在浮动元素之后）。
二、BFC是什么
2.1、了解BFC
- 块级格式化上下文（Block Formatting Context）
- 开启BFC的区域，是一块
独立的渲染区域，是页面上一个隔离的独立容器。 - 隔绝了内部与外部的联系，内部渲染不会影响到外部，即容器里面的子元素不会影响到外面的元素。
（BFC原则） - 不同的BFC区域，渲染时也互不干扰。
W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。
简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性
2.2、解决什么问题
1、开启BFC，其子元素不会再产生margin塌陷问题（不会和他的子元素产生margin合并）
给父元素开启BFC，这样子就不会影响到子元素，需要注意的是，我们给这个父元素开启BFC，解决的是父元素内部的margin塌陷问题，但是他没有考虑父元素外部会不会有影响。
2、 开启BFC，就算子元素浮动，父元素自身高度也不会塌陷（高度计算不再无视浮动元素）
3、 开启BFC，自己不会被其他浮动元素所覆盖（不会与浮动元素重叠，会避开浮动元素排布）
2.3、如何触发开启BFC
- 根元素（HTML）
- 设置float属性，即float的值非none
- 设置position属性，并且position的值为：absolute、fixed
- 设置overflow属性，但是overflow的值不能为visible
- 行内块元素：IE不支持
- 设置display属性，并且display的值为：inline-block、table-cell...
- 伸缩项目：flex元素内的item
- 多列容器：设置column-count
- 表格元素：table、thread、tbody、tfoot、tr、th、td、caption
- column-span为all的元素：表格第一行横跨所有列
影响比较小的：设置display：flow-root，但是IE不支持，或者设置overflow：hidden，前提是当前容易没有溢出的元素
