请你说一说你知道的所有web布局方式？
1.浮动
float:left|right
2. inline-block
display:inline-block(行内块级)
3.flexible box(弹性盒子)
display:flex
4.grid
display:grid
5.绝对、相对布局
position:absolute/relative
6.表格
display:table
7.使用布局框架--bootstrap.css
本文的所有例子使用了同一种三栏布局。
大尺寸：width>1024px
中尺寸：768px<width<1024px
小尺寸：width<768px
1.浮动布局，最常见的布局之一
普通的html布局，一个header，一个footer,中间是三栏布局，关键的css代码，三栏布局添加浮动，清除浮动，元素的宽度都是百分比，日常应用是多用auto，让里面的内容撑起高度
用@media查询，当@media的查询条件满足时，应用{}中的样式，screen就是指电脑屏幕。
2.inline-block display:inline-block
html和浮动布局都是一样的，为了避免空白符号压缩的问题，写法略有变化。
只是把float:left改为了这两句，其他的不变，没有推荐，看个人习惯。
3.flexible box (弹性盒子)
display:flex;设置在容器上。
先介绍下display:flex的用法：
本例中只改变就行
4. display:grid 网格布局，不常用。
5.position:absolute/relative 常用。
6.使用bootstrap.css框架。
tips:
1.尽量不使用固定高度、宽度，使用百分比，auto，calc()
2.viewport:
