面经练习（一）

1.bfc

①.首先什么是BFC：
直译为"块级格式化上下文"。它是一个独立的渲染区域，是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的行内元素所组成）都会垂直的沿着其父元素的边框排列。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

②.BFC如何创建：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex等
4、overflow的值不是visible

③.BFC的作用：
1.利用BFC避免margin重叠。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC

2.自适应两栏布局
BFC的区域不会与float box重叠。

left–左浮动，right-- overflow：hidden

3.清楚浮动
计算BFC的高度时，浮动元素也参与计算。

2.两边固定，中间自适应

1. flex布局：
   父display flex 左子width 右子width 中子flex：1

2. 利用浮动：
   左右盒子 一个左浮动一个右浮动，中间margin
   center占据文档流位置，所以一定要放在最后 html盒子位置：左盒子，右盒子，中盒子
   

3. 利用绝对定位
   左盒子定位在左边，右盒子定位在右边，中间margin，width：auto否则中间文字不会换行

3.快速排序

function quickSort(arr, i, j) {
   
    if (i < j) {
   
        var left = i;
        var right = j;
        var pvo = arr[left];