常用布局方法
float布局：
1.实现原理：通过控制元素向某个方向移动从而改变元素的布局
2.特点：
①脱离了文档流，但是不脱离文本流（但仍会占用空间）
②上面贴非float元素（一般float元素上面贴的都是非float元素），旁边贴float元素（靠左，或者靠右的时候贴float元素），不影响其它块级元素位置，影响其它块级元素内部文本（三四两点就是特性一说的脱离文档流，不脱离文本流）
也就是以下这种情况（当子元素的宽度之和恰好大于或等于父盒子的宽度时）：
③对于其父级元素来说，使用了float属性的元素不存在高度，相当于在布局中消失了，因此父级元素会存在高度塌陷的情况，解决这种情况可以使用设置父级属性：overflow的方法防止其高度塌陷
3.优点：兼容性好，比较简单
4.缺点：
①使用float布局时当修改其中一个元素会导致页面布局发生严重的变化甚至打乱原本布局
②容易使父盒子产生高度塌陷的情况
③float布局方式要程序员自己计算宽度，不灵活
④由于该布局只对设置了float属性的元素起作用，而对于没有设置该属性的元素则会有很多种排列可能，如下：
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<style>
.main{
background-color: brown;
width: 200px;
}
.word1{
background-color: aquamarine;
height:90px;
width:90px;
float:left;
}
.word2{
background-color: antiquewhite;
height:90px;
width:90px;
float: right;
}
</style>
</head>
<body>
<div class="main">
<span class="word1">这是左边的span元素</span>
<span class="word2">这是右边的span元素</span>
<span>这是一句话</span>
</div>
</body>
</html>
</DOCTYPE>
而在子元素的大小之和大于父盒子的时候，就会出现右边这种情况。
5.适用情况：
①文本环绕，即文本环绕图片元素排列的情况
②元素较少的排列布局
③当不需要兼容IE浏览器又不需要兼容最新浏览器时可以使用flex布局
6.三栏布局：当页面上出现三大块布局时可使用设置左右两块的宽和高和float属性，中间一块布局只设置高度就可以把中间部分填满。如果给非float元素加上宽度，一定要记得给此元素加上margin-left/right属性，否则会出现非float元素被float元素覆盖住一部分的情况。
flex布局：
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
1.实现原理：在容器（也就是父元素）中设置默认的两根轴线，通过改变元素在轴线上的排列方式改变元素的布局
2.特点：容器默认存在两根轴: 水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束的位置佳作main end；交叉轴的开始位置又叫做cross start，结束为止叫做cross end。项目默认沿主轴排列。单个项目占据的主轴控件佳作main size，占据的交叉轴控件叫做cross size。
3.优点：
①使用范围广：任何一个容器都可以指定为 Flex 布局，行内元素也可以使用 Flex 布局。
②灵活性较强
4.缺点：兼容性差
5.语法知识点：
①flex-direction属性：决定主轴的方向（即项目的排列方向）：
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
②flex-wrap属性定义，如果一条轴线排不下，如何换行：
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
③justify-content属性定义了项目在主轴上的对齐方式：
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
④align-items属性定义项目在交叉轴上如何对齐：
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
grid布局：
1. 实现原理：将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格
2.特点：grid布局是一个二维布局
3.实现方法：
创建一个容器（也就是父类元素），在容器中声明grid属性（display:grid或者
display:inline-grid），这时容器中的项目就会按照容器设置的属性排列。
4.重要知识点：
①grid-template-columns:设置容器的行列数（不填写属性值时系统会自动分配）
grid-template-columns:100px 100px 100px; // 显示为三列每一列宽度100px
grid-template-columns:repeat(3,100px);
（a）auto-fill，单元格的大小是固定的，但是容器的大小不确定，使用这个属性就会自动填充
（b）fr：平均分配
grid-template-columns:repeat(4,1fr); // 宽度平均分成四等份
grid-template-columns:1fr 2fr 3fr; // 列宽这样是分成6份各占 1 2 3 份
（c）auto：由浏览器自己决定长度
（d）网格线．可以用方括号定义网格线名称，方便以后给盒子定位使用
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
② grid-row-gap/ grid-column-gap（grid-gap是前面两个的简写）
（1）、grid-template-columns 设置列
（2）、grid-template-rows 设置行
（3）、grid-template-areas 定位空间
（4）、grid-template （1）和（2）和（3）组合使用缩写
（5）、grid-column-gap 设置列间隙
（6）、grid-row-gap 设置行间隙
（7）、grid-gap （5）和（6）组合使用缩写
（8）、justify-items 设置水平对齐内容位置
（9）、align-items 设置垂直对齐内容位置
（10）、justify-content
（11）、align-content
（12）、grid-auto-columns 创建隐式网格（不讲，用的不多）
（13）、grid-auto-rows 创建隐式网格（不讲，用的不多）
（14）、grid-auto-flow 自动布局（不讲，用的不多）
