**# CSS中的浮动、定位以及flex布局**
明天还要考试，不想复习啊，突然就想尝试着写一些东西，正巧在复习CSS，就想着总结一下吧！（主要是pink老师教的啊！！）
浮动
定位
flex布局
三者的区别
一、浮动
（一）为什么需要浮动？
因为很多的布局利用标准流是无法完成布局的，这时候就可以利用浮动来完成。
浮动最典型的应用是：让多个块级元素一行内显示排列
（二）浮动的语法
选择器 { float：属性值;}
属性值包括：none（不浮动，默认值），right（右浮动），left（左浮动）
（三）浮动的特性
1、浮动的元素会脱离标准流（脱标）
2、浮动的元素不保留原先的位置
3、多个设置浮动的元素会按照属性值一行内排列并且顶端对齐排列（浮动的元素是紧贴在一起的，并且如果父级盒子装不下这些元素会另起一行显示
4、浮动的元素具有行内块元素的特性（任何元素都可以设置浮动）
（四）浮动元素的注意点
1、浮动元素经常搭配标准流的父元素使用
2、如果一个元素浮动了，其余的兄弟元素也要浮动
3、浮动的元素只会影响浮动后面的标准流，不会影响前面的标准流
（五）清除浮动
由于在很多情况下，父盒子不方便给高度，而且子元素浮动又脱离标准流不占有位置，就会导致父元素的高度为0，会影响下面盒子的布局，此时就需要清除浮动，清除浮动后，父元素就会根据子元素的大小检测高度，就不会影响下面盒子的布局了
1、额外标签法（多添加的元素必须是块级元素）
2、父级添加overflow属性
.box{overflow:hidden;}
3、父级添加after伪元素
.clearfix:after{//clearfix是父级元素的类名 <div class="box clearfix"><div>
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;//为了兼容性
}
4、父级添加双伪元素
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
二、定位
（一）为什么需要定位？
定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住盒子
定位=定位模式+边偏移
（二）定位的分类
1、静态定位——static
元素默认的定位方式，即无定位，没有边偏移
2、相对定位——relative
.box{position:relative;}
特点: （1）是相对于自己原来的位置来移动的（参照点是自己原来的位置）
（2）不脱离标准流，继续保留原来的位置
（3）**经常是配合绝对定位使用**
3、绝对定位——absolute
.box1{
position:absolute;
right:100px;
top:100px;
}
特点：
（1）绝对定位在移动时，是相对于祖先（父级、祖级）元素来说的
（2）如果祖先元素没有定位或者没有祖先元素，则以浏览器为标准的
（3）如果祖先元素有定位，则以最近一级的祖先元素为参照点移动
（4）绝对定位是脱离标准流的，不再占有原先的位置
（5)父元素使用绝对定位占用位置，子元素使用绝对定位在父元素中移动
4、固定定位——fixed
.box2{position:fixed;}
（1）固定在浏览器的可视区的某个位置
（2）以浏览器的可视窗口为参照点移动
（3）和父元素没有任何的关系
（4）不随滚动条移动
（5）脱离标准流，不再占有原来的位置
5、粘性定位——sticky（了解）
可认为是固定定位和相对定位的结合
(三）定位的叠放次序—— z-index
在使用定位布局的时候会出现盒子重叠的情况，会使用z-index设置层叠次序
特点：
（1）数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
（2）如果属性值相同，则按照书写顺序，后来者居上
（3）数字后面不能加单位
（4）只有定位的盒子才有z-index
四、flex布局
（一）flex布局的原理
给父级元素添加flex属性，来控制子元素的排列方式和位置
（二）flex布局父级常见属性
- flex-direction:设置主轴的方向
flex-diretion:row;//主轴为x轴，则侧轴为y轴，默认属性 且是从左到右
flex-diretion:row-reverse;//从右到左
flex-diretion:column；//从上到下
flex-diretion:column-reverse；//从下到上
- justify-content:设置主轴上的子元素的排序方式
justify-content:flex-start;//默认值，从头部开始，如果主轴上x轴，则是从左到右的
justify-content:flex-end;//从尾部开始排列
justify-content:center;//在主轴居中对齐
justify-content:space-around;//平分剩余空间
justify-content:space-between;//先两边贴边，然后再平分剩余空间
justify-content:space-evenly;//均匀排列每个元素，且每个元素的间隔是相等的
- flex-wrap:设置子元素是否换行
(1)flex-wrap：nowrap; //默认值，不换行，当为此属性时，如果子元素的宽度和超过父元素的宽度也不会换行，只会改变子元素的宽度直到父元素能够包含子元素
(2)flex-wrap:wrap; //换行 - align-content:设置侧轴上的子元素的排列方式**（多行）**
align-content:flex-start;//默认是在侧轴的头部开始排列
align-content:flex-end;//在侧轴的尾部开始排列
align-content:center;//在侧轴的中间显示
align-content:space-around;//子项在侧轴平分剩余空间
align-content:space-between;//子项在侧轴先分布在两头，再平分剩余空间
align-content:stretch;//设置子项元素高度平分父元素高度
- align-items：设置侧轴上（默认是y轴）的子元素的排序方式**（单行）**
align-items:flex-start;//从上到下
align-items:flex-end;//从下到上
align-items:flex-center;//（挤在一起）居中
align-items:stretch;//拉伸（子元素不给高度）
- flex-flow：复合属性，相当于设置flex-direction和flex-wrap
（三）flex布局子项元素常见属性
- flex 子项目占的份数
用于控制子项分配剩余空间，用flex表示占多少份数
.items{
flex:<number>;
}
- align-self 控制子项自己在侧轴的排列方式
设置自己在侧轴上的排列方式，可覆盖align-items属性 - order 属性定义子项的排列顺序（先后顺序）
默认值是零，数值越小越靠前
三、三者的区别
-
浮动，浮动虽然可以进行布局但本质上浮动是用来进行文字环绕效果的，而且使用float进行布局时，会比较的麻烦，一般使用浮动后还要清除浮动 float布局会脱离标准流
-
定位，定位会比较的灵活，使用定位后可使用z-index设置元素的层叠次序。相对定位时不脱离标准流，使用绝对定位时会脱离
-
flex布局更加的灵活和快捷，主要是用于移动端
-
绝对定位和固定定位和浮动有类似：
（1）行内元素添加绝对定位或者是固定定位，可以直接设置宽和高
（2）块级元素添加绝对定位或者是固定定位，如果不给宽和高，默认的大小是内容大小
（3）不会引起外边距合并的问题
