在CSS 布局中，用 float 和 position 的区别是什么

两者是有绝对的区别的，float是时元素浮动，而position是用来给一个元素定位的。

1、float的定义和常见用法：

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。、

实例如下：

    
        
        
        
            div{
                width:200px;
                height: 200px;
                border: 2px solid pink;
                margin:0 5px;
                float: left;
            }
        
    
    
11111

22222

33333

    

float属相使得块级元素的div可以在同一行并排，效果如下：

2、position定义和用法：

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

其属相值有：

绝对定位的实例：

float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.

position: absolute|relative; 要配合top,left等定位;

　　position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-index。PS的图层效果就是position: absolute。

　　float也会导致元素脱离文档流，但还在文档或容器中占据位置，把文档流和其它float元素向左或向右挤，并可能导致换行。图片的文字环绕布局效果就是float。

　　display的inline-block不脱离文档流，将block元素当作大型字符嵌入文档流内，类似于img或者input默认效果。