Question

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

Answer 1

float是浮动，position是定位
float主要用于普通的网页布局，让块元素能够处于同一行展示
position是用于实现多层叠层的布局效果
在网页的实际开发当中，大部分情况下使用float，需要重叠层的时候用定位
两者均能够使元素脱离文档流

具体知识，详细的相关知识（因为不知道你具体会想问哪方面），可以去看HTML5学堂的文章 或者 看看HTML、CSS的入门书籍，比如《HTML5布局之路》什么的

Answer 2

普通流，浮动，绝对定位。

1. 普通流： 普通流 （normal flow)，或者称之为常规流。也是我们通常称呼的“文档流”。

2. 浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局，只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样。

   当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

3. 绝对定位（absolute）：脱离普通流，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。可以层叠默认是要比普通流 和浮动元素z-index高。

   相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。但是不会脱离普通流相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。

   
   资料转载于：HTML5学堂