经常问到并列布局的知识点
BFC定义
Block formatting context ---块级格式化上下文。是一个独立的渲染区域，只有
Block-level box参与(inline box不参与)，它规定了内部的Block-level Box如何布局，并且和这个区域外部毫不相干。
BFC布局规则
- 内部Box会在垂直方向，一个一个的放置
- box垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的Box的margin会发生重叠
- 每个盒子的margin box左边，与包含块border-box的左边相接触（对于从左往右的格式化，负责相反），即使存在浮动也是如此。
- BFC区域不会与float box重叠
- BFC是页面上一个隔离的独立容器，容器里面的子元素不会影响外边的元素。
- 计算BFC高度时，浮动元素也参与计算。
如何创建BFC
- float不是none
- position 不是static和relative
- display 的值是inline-block，table-cell,flex,table-caption,inline-flex;
- overflow的值不是visible
用法
1.利用BFC避免margin重叠
由于同属一个BFC的两个相邻box会发生margin重叠，所以可以设置为两个不同的bfc。
例如：把第二个用div包裹起来
2.自适应两栏布局
由于每个盒子的margin box左边，与包含块border-box的左边相接触，如果左边盒子设置float：left，右边自适应宽度，左边的盒子就会悬浮在右边盒子的上方，而不是左右并列。
这时根据BFC区域不会与float box重叠,让右边的建立自己的BFC区域，则会成为左右并列的情况。
例如：给右边的盒子设置overflow:hidden。
3.清除浮动
当子节点都是float时，父节点不会被撑开，这时通过给父节点设置overflow：hidden激活BFC，父节点就会被撑开。
