对于web页面布局史中，浮动与定位统治了所有页面的布局。定位有不可替代的优点，主要的优点是可以实现多层级结构，且子元素的位置不局限于父元素的范围内。
浮动布局主要用于解决多个块元素共存于一行的问题。虽然浮动可以解决多个块元素共存一行的问题，但是也会有非常不好的影响。
影响一，浮动元素会脱离文档流，使用浮动技术后，还要清除浮动的影响。
图1：元素浮动
图2：清除浮动
影响二，在多个块元素共存于一行后，在块元素的宽度无法达到父元素的宽度时，为了美观，会采用等距分隔或等距环绕设计。对于这样的设计，则需要人为的，精确的计算块元素的外边距。
顺便给大家推荐一个裙，它的前面是 537，中间是631，最后就是 707。想要学习前端的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，如果不是想学习的小伙伴就不要加啦。
图3：精确计算实现等距分隔
由于浮动技术有很多的缺点，所以将会受到很大的冲击，它的对手将是弹性布局。弹性布局主要作用是，设置父元素内的多个块元素的排列顺序以及分布方式。
弹性布局与浮动相比，不但可以实现多个块元素共存于一行，而且对父元素没有不好的影响，同时实现子元素等距分隔，或等距环绕并不需要人为的计算。弹性布局会自动计算。
图4：弹性布局
图5：实现等距离分隔
结束语：
望此文成为一盏明灯，指引你们来时的路。
CSS是前端基础技能之一，而CSS最重要的功能就是网站布局。CSS布局方式有很多，从远古时代的table（表格）布局-->float（浮动）布局-->position（定位）布局-->flex（弹性）布局-->grid（网格）布局（还未正式推出），下面咱们简单谈一谈各种布局的用法及其优缺点。
table布局就是将网站当做一个表单来做，这里不做展开，因为现在基本不这么用了。
float：浮动。float刚开始并不是为了用来网页布局，而是用来解决图文信息中图片与文本冲突的问题的。
如下图：
这种常见的图文效果，没有float之前是很难达到的。有了float之后只需要加一个float：left，轻松搞定。
‘咦，如果float可以处理图文的问题，那用来布局不也可以吗？’，后来有人用float试着用于网页布局，还真的可以。
网页中最常见的布局如下：
用float做
比table布局要方便不少，不过float随之而来的带来了 “浮动高度塌陷”的问题：
如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为0；
引申：网页元素一般分为 普通流，浮动流，定位流。其中普通流和浮动流在一个层级上，定位流>浮动流>普通流。
之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法，非常麻烦。
position：定位；顾名思义，就是确定位置。position同样可以用做网页布局。
同样的效果
不过position需要计算每一个元素的位置，而且这个位置是定死的，略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。
关键点：子绝父相。需要定位的元素用absolute绝对定位，其父元素用 relative相对定位。还有fixed固定定位，他是以html为父元素的定位。
flex：弹性；弹性布局很好的解决了float和position的问题，非常好用。
使用方法：
在父元素使用 display:flex确定弹性作用的范围。
然后
justify-content：center（space-around，space-between等）；水平方向布局；
align-items:center(flex-start,flex-end等)垂直方向布局；
不过flex不兼容IE8及以下的浏览器。
大部分情况下flex布局已经能满足需要，不过flex只能用作一维布局，也就是说，flex一次只能作用于一条线。如果想要进行二维布局，必须翻转坐标二次弹性，这样会显得不够优雅，这时候grid（网格）布局就发展起来了。
grid布局用法和flex相似，但是作用于二维布局。
先在父元素使用 display:grid确定网格作用范围；
然后
grid-template-columns: 40px 50px auto 50px 40px（行）
grid-template-rows: 25% 100px auto（列）
等等属性，这里只简单介绍，大家了解有这个东西就行。
在现实工作用，以flex为主，position辅助已经足够应对所有问题。
CSS2.1定义了 4 中布局方式
给任意元素设置 display:flex,弹性布局就会被创建,flex 的子项会发生变化.
flex-direction属性用来控制 flex 子项的整体布局方向,决定是从左往右排序.flex-dirction属性有以下语法
flex-wrap属性用来控制 flex 子项单行显示还是换行显示,以及在换行显示情况下,没一行内容是否在垂直方向的反向显示.
flex-flow属性是 flex-dirction属性和 flex-wrap属性的缩写.表示弹性布局的流动性特性
CSS 在 flex 中属性名称基本上是几个固定单词的组合,且这些单词在整个 CSS 世界中是通用的含义
justify-content 属性在弹性布局中常用的语法如下
align-item和 align-self属性的一个区别是 align-self属性是设置在具体的某个 flex 子项上,而 flex-items 属性是设置在 flex 容器上,器控制 flex 子项的垂直对齐方式,align-self默认值是 auto,其余的数据值个 align-items 属性值一致.属性如下
align-content属性和 align-items属性的区别在于 align-items属性设置的是每一个 flex 子项的垂直对齐方式,而 align-content 属性是将所有作为一个整体进行垂直对齐设置.align-content 属性如下所示
我们可以通过 order 属性来改变 flex 子项的顺序位置.order 属性越小优先级别越高
flex 属性是弹性布局的精髓,因此弹性布局就是 flex 属性的作用.flex 属性是 flex-grow flex-shinrk flex-basic这 3 个属性的缩写.我们先了解下flex 常用的几个声明
表示的是什么意思?
flex-basic 属性用来表示基础宽度
flex-grow 属性表示宽度还有剩余的时候
flex-shrink 属性表示宽度不足的时候
flex:0等同设置 flex:0 1 0%,flex:none等同设置了 flex:0 0 auto.
如果没一行的行数是固定的,则可以使用两种方式实现最后一行对齐
要实现最后一行对齐,理论上最好使用 gap 属性设置间隙
如果每一行的行数不固定,则上面的方法都失效,需要使用其他的方式实现最最后一行对齐.可以使用空白标签进行填充占位,具体的占位数量由最多列数的个数决定
