布局（浮动）（弹性布局）（圣杯布局）

浮动布局

float浮动:left左浮动，right右浮动，元素浮动之后会脱离原来的文档流，参与浮动文档流，在浮动文档流中块元素也是横排布局，宽度也不再是100%
cursor:pointer;鼠标样式
clear:both;最基本清除浮动的方法，是在最后一个元素后边添加一个元素，设置这个元素的clear为both

在不添加新元素的情况下清除浮动：浮动的元素都会有一个父物体，可以为父物体添加一个后缀伪元素，在后缀中清除浮动， 一般情况下都会将清除浮动的样式写成一个class(clear-fix)
哪个元素需要清除元素的浮动 就为这个元素添加这个class

！！！使用浮动布局，必须在最后一个元素结束的地方清除浮动，否则会影响后续标签的布局，也会导致父元素不能根据内容显示高度

弹性布局

flex布局，display:flex;让该标签作为容器开启弹性布局，容器开启弹性布局后，默认容器中所有的项目(容器的子标签)都是在行内展示的
flex-direction设置主轴方向:
默认主轴方向为row，row指横轴(x轴)，默认项目从左向右进行排列
row-reverse，主轴方向依然是横轴，默认项目从右向左进行排列
column，设置主轴方向为竖轴(y轴)，默认从上向下进行排列
column-reverse，设置主轴方向为竖轴(y轴)，默认从下往上进行排列
justify-content设置在主轴方向的对齐方式:
默认为 flex-start 主轴开始位置进行布局
flex-end，项目从左往右依次排列，整体右对齐
center，项目从左往右依次排列，整体居中对齐
space-around，项目从左往右依次排列，整体两端有留白(项目间隔的一半)，每个项目之间的间隔相同
space-between，项目从左往右依次排列,整体两端对齐，没有留白，项目间隔相同
align-items设置项目在交叉轴的对齐方式，交叉轴，垂直于主轴的轴(y轴):
flex-start，默认值，交叉轴的开始位置布局
center，交叉轴方向居中显示
stretch，如果项目未设置高度，则拉伸为容器同等高度
baseline，项目基线对齐
flex-wrap设置换行
默认nowrap情况下，一行之内放不下所有的项目，会将项目进行压缩，不会自动换行
wrap，换行，从flex-start向flex-end进行换行，多出来的行放在下面
wrap-reverse，从flex-end向flex-start进行换行，多出来的行放在上面
flex-grow设置项目方法比例
单个项目在主轴方向的排序，默认值0，值越小越靠前
默认值0，表示即使存在剩余空间，也不放大
flex-shrink，收缩比率当空间不足时对于剩余空间为负的值的处理
默认值为1，当容器没有设置换行并且一行内显示不下标签，项目默认会被压缩
值为0表示项目不允许被压缩
align-self，单独设置某个项目的交叉轴对齐方式，这个值可以覆盖容器中的align-items
flex-basis:~px;设置元素在布局方向上的长度

圣杯布局

上(顶部导航)
中(左中右)
下(底部页脚)