BFC渲染
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素 BFC 的常见应用有：
- 清除浮动。
- 独立渲染。
- 解决外边距塌陷。
BFC的触发方式
总结一下常见的触发方式有（只需要满足一个条件即可触发 BFC 的特性）：
- 根元素，即
<html> - 浮动元素：
float值为left、right overflow值不为visible，即为auto、scroll、hiddendisplay值为inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid- 绝对定位元素：
position值为absolute、fixed -
自适应两列布局
左列浮动（定宽或不定宽都可以），给右列开启 BFC。 效果：
预览
- 将左列设为左浮动，将自身高度塌陷，使得其它块级元素可以和它占据同一行的位置。
- 右列为 div 块级元素，利用其自身的流特性占满整行。
- 右列设置overflow: hidden,触发 BFC 特性，使其自身与左列的浮动元素隔离开，不占满整行。
这即是上面说的 BFC 的特性之一：浮动盒的区域不会和 BFC 重叠
防止外边距（margin）重叠
兄弟元素之间的外边距重叠 效果：
根据 BFC 特性，创建一个新的 BFC 就不会发生 margin 折叠了。比如我们在他们两个 div 外层再包裹一层容器，加属性 overflow: hidden，触发 BFC，那么两个 div 就不属于同个 BFC 了。
水平居中及垂直居中方式
简单来说，分几种常用的手法：
- 最最基础的方式是的使用
margin:0 auto来使元素水平居中。 - 使父元素中的子元素垂直居中的方式是：父元素
line-height与自身高度相同。 - 用flex来实现居中：
| 123 | display:flex;``justify-content:center;``align-items:center; |
|---|
flex 弹性布局
flex 弹性布局提供了一种不同于传统 float 的布局方式，通过主轴和侧轴实现元素的排列。
- 我们先来看父元素的属性(只列举一些常见的）：
- display:flex; //定义父元素为flex盒子
- flex-direction:row/column; //定义flex盒子中的主轴方向
- flex-warp:warp/nowarp; //定义flex盒子的主轴元素是否自动换行
- justify-content:center/space-around/space-between; //定义元素在主轴上的排列方式
- align-items:center; //定义元素在副轴上的排列方式。
对于子元素来说有一个必须知道的知识点：flex:1代表什么？
简单来说，flex:1是一个语法糖，浏览器会解析为对应的属性。
- flex-grow:1; //会填充主轴的剩余空间
- flex-shrink:1; //会在主轴空间元素不足时，被压缩
- flex-basis:0%; //元素在扩展或收缩时，基于的自身原本宽度
那我们就知道了，这三个属性配合使用，就可以使所有的子元素都保持同样的大小。
在开发中通常需要擅用这三个属性，来控制flex中子元素的大小。
