BFC概念
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC的布局规则
- 内部的box会在垂直方向，一个接一个放置。
- box垂直方向距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。
- 每个盒子的margin box的左边，与包含块的左边相接触。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
如何创建BFC
- float的值不是none(left,right,auto)
- position的值不是static或者relative(absolute,fixed)
- display的值是inline-block，flex，table-cell，table-caption
- overflow的值不是visible(hidden, scroll,auto)
BFC的作用
- 利用BFC避免margin重叠（给其中一个元素外边包一个BFC，它的margin与相邻的margin就不会重叠）。
- 自适应两栏布局（让右边元素单独成为一个BFC，right就会自动适应宽度，形成一个两栏自适应的布局）。
- 清除浮动。当不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候要清除浮动（给父节点激活BFC）。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
