7. BFC

1. BFC 全称为 块格式化上下文 (Block Formatting Context) 。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

2. BFC是一个独立的布局环境

其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

3. BFC 特性(功能)

 1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
 2、计算BFC高度时浮动元素也参于计算（重点）
 3、BFC的区域不会与浮动容器发生重叠（重点）
 4、BFC内的容器在垂直方向依次排列
 5、元素的margin-left与其包含块的border-left相接触
 6、BFC是独立容器，容器内部元素不会影响容器外部元素

4. 如何创建BFC

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible，是auto,hidden

5. bfc的好处

1.避免外边距（margin）重叠
2.清除浮动
3.不会与float box盒子重叠

6. bfc的用处

多用于两列或其他布局，块级元素默认占满父元素，用overflow:hidden让元素变成bfc，就可以自适应两栏布局