css中的浮动布局定位布局flex布局（伸缩盒布局）⼀、浮动布局
float ( 如果⼀个元素添加float属性，那么这个元素就会成为⼀个浮动元素 )
left                向左浮动元素
right              向右浮动元素
none          【默认值】，不浮动
inherit          浮动⽅式继承⽗元素
浮动元素的特点
当⼀个元素是浮动元素的时候，它会失去对⽗元素的⽀撑
清除浮动
1. 给⽗元素添加overflow : hidden;
2. 使⽤伪元素  : : after
⼆、定位布局
position
static              静态（默认）              ⾮定位元素
relative          相对定位                      定位元素
相对的是元素原先的位置，
不脱离⽂档流
可以覆盖在其他元素上
absolute          绝对定位                        定位元素
相对的是距离它最近的⽗定位元素的位置，如果没有⽗定位元素，那么它相对于浏览器视⼝
脱离⽂档流（不占据原先的位置）
fixed                固定定位                        定位元素
相对于浏览器视⼝
脱离⽂档流
不会随着浏览器的滚动⽽滚动
sticky                粘滞定位                  定位元素
不脱离⽂档流
使⽤top、right、bottom、left设置⼀个过渡点，当超过这个过度点的时候就会体现fixed固定在页⾯上默认⽂档流的特点：默认宽度由内容决定，不占据原先的位置（原先的位置被其他元素抢占）
三、flex布局 ( 伸缩盒布局 )
flex布局
① 任何⼀个容器都可以指定为flex容器
采⽤Flex布局的元素，成为Flex容器，它的所有字元素成为Flex项⽬
容器默认存在两根轴：⽔平的主轴和垂直的交叉轴
② 当我们为⽗盒⼦设为flex布局后，⼦元素的float、clear属性即将失效
③ 给⽗元素设置display：flex，达到控制⼦元素的⽬的
常见⽗项（容器）属性
flex布局对齐方式flex-direction : 设置主轴的⽅向
row(默认值)：主轴为⽔平⽅向，起点在左端
row-reverse：主轴为⽔平⽅向，起点在右端
column：主轴为垂直⽅向，起点在上沿
column-reverse：主轴为垂直⽅向，起点在下沿
justify-content ：设置主轴上的⼦元素排列⽅式
flex-start：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项⽬之间的间隔都相等
space-around：每个项⽬两侧间隔相等，
所以，项⽬之间间隔⽐项⽬与边框的间隔⼤⼀倍
flex-wrap：设置⼦元素是否换⾏
nowrap(默认)：不换⾏
wrap：换⾏，第⼀⾏在上⽅
wrap-reverse：换⾏，第⼀⾏在下⽅
align-content ：设置侧轴上的⼦元素的排列⽅式（多⾏）
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间平均分布
space-around：每根轴线两侧的间隔都相等，所以，轴线之间的间隔⽐轴线与边框的间隔⼤⼀倍                stretch（默认值)
align-item：设置侧轴上的⼦元素排列⽅式（单⾏）
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项⽬的第⼀⾏⽂字的基线对齐
stretch（默认值）：如果项⽬没设置⾼度或设auto，将占满整个容器
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
项⽬的属性
order
该属性定义了项⽬的排列顺序，数值越⼩，排列越靠前，默认0
flex-grow
该属性定义了项⽬的放⼤⽐例，默认0，即如果存在剩余空间，也不放⼤
flex-shrink
该属性定义了项⽬的缩⼩⽐例，默认为1，即如果剩余空间不⾜，该项⽬将缩⼩
flex-basis
该属性定义了在分配多余空间之前，项⽬占据的主轴空间
flex
flex-grow、flex-shrink、flex-basis的速写形式