第一篇：css中position，float，display：flex 这三者的区别？

1、共同点：

这三种方法都是用来做元素位置布局的，其中 display：flex；在工作中最常用，也最方便。position是定位，最常见的是涉及到父子元素的定位的时候，最后一个是float浮动布局，在工作中用到的频率相对较少。

2、三者细讲

2.1、display:flex

主轴在水平方向上，即水平方向的排布：

justify-contant: center -----水平居中;

justify-contant: flex-start ------左对齐;

justify-contant: flex-end -----右对齐;

justify-contant: space-between ------两侧对齐;

justify-contant: space-around -------自动分配； 

flex-wrap: nowrap | wrap  | wrap-reverse;

flex-wrap属性总共有三个属性:

1.nowrap排在一条线不换行;

2.wrap排在一条线如果一条轴线排不下换行 ;

3.wrap-reverse排在一条线上，第一行排线下面

 主轴在垂直方向上，即垂直方向的排布：

换轴向指令：  flex-direction: column;

其他的与水平方向上的是类似的，只不过换个方向而已。

2.2、position定位：

position定位（遵循子绝父相）

position：fixed 顶部元素不动

position:relative 父元素的相对定位；

 positon:absolute 子元素的绝对定位

中心居中：工作中最常见到的一种情况：

​​​​​position-absolate 子元素的相对定位；

top：50%；

left：50%；

transform-translateX（-50%）;

transform-translateY（-50%）;

2.3、浮动：

flot-left ----左浮动；

float-right -----右浮动；

clear：left/right/both清除浮动；

overflow：hidden；溢出隐藏；

（浮动使用场景较少，大家可以自己动手浅试一下）