Question

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

Answer 1

CSS布局浮动(float)和定位(position)属性的区别：

1、postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位，但是position移动后，原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

2、float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染，可以重叠，原位置被清空。

二者之中最大的差别就是位置保留。

3、同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。

常用的清除浮动的方法有两种：

通过在容器中添加一个标签，设置该标签的样式为 clear: both

容器设置overflow: hidden

<div style="background: #fff; width: 100%; overflow: hidden;">
   <div style="float: left; position: absolute;">我是DIV</div>
   <div style="clear: both;"></div>
<div>
效果：

Answer 2

我补充一下float的问题。我们常说的文档流其实是指默认文档流。基本显示模型block和inline分别是块状换行和连续多行模型，前者可以设定尺寸，后者不可以设定尺寸（根据内容决定尺寸和折行）。

不过我们总是遇到固定尺寸，或者固定部分尺寸且不折行的场景，这个时候我们马上会想到使用float来做布局，因为float会触发shrink to fit特性，实现根据内容决定尺寸，float还不会产生折行，我们通过clear来手工模拟折行。这个现状我觉得主要是因为对inline-block的兼容性顾忌产生的，在IE6的时候它没有被广泛支持。使用position实现这样的布局需要配合javascript修正，在某些场景它比float强，因为float模拟的流动布局不是多行连续布局，一些浮动元素经常因为意外的尺寸改变被卡在我们不希望它出现的位置。所以我们可以看到像pinterest这样的网站使用了javascript配合absolute position的方式，讲布局引擎的任务完全交给javascript来实现。从表现与行为分离的角度它不太合理，但是从结果上来说它很让人满意。

但是，我写这段的意思是说，很多时候我们希望控制的布局流问题不需要float和position实现，而应该通过显示模型定义来解决。比如现在的column layout、flex box等等，都是在这个角度解决我们遇到的问题，它们应该才是正解。而我们犯这个错误的最初原因也许就是对像inline-block这样的显示模型的不信任开始的。

希望CSS3的进化能够让我们重建这样的信任。

UPDATE: 我忘记说的就是如果你做移动的Web开发，那么你就知道为啥float很少在布局上使用。Android和iOS里面的flex box已经非常稳定了，很低版本（Android 1.6，iOS 3）就已经很好支持了，用这些布局模型在窄小且多样的手机屏幕上面相当可靠，而float在这些情况下则问题层出不穷。所以我现在相信mobile first，也相信移动设备的Web能够更好的推广CSS3的众多新特性的采用。比如新的CSS3 background and box module在移动设备里面几乎是必备的，因为background-size是retina display必用的，而border-image则是解决复杂的按钮和面板的最佳解决方案。如果你做Mobile Web，那么你就会爱上CSS3新特性，也会享受它带来的标准化的世界的好处。

Answer 3

Vue实践-CSS样式position/display/float属性对比使用

Answer 4

共同点：对内联元素设置float或absolute属性，可以让元素脱离文档流（块级元素也可以），并且可以设置其宽高。
不同点：
float仍会占据其位置，position会覆盖文档流中的其他元素。
其实这个命题有误，只有position才是定位，float不能说是定位，不过你可以说这两种布局方式有什么不同。
float和position这两者并没有孰好孰不好的问题，两者按需使用，各得所需的效果。
float
从字面上的意思就是浮动，这种在印刷排版之类中可能解释的更加贴切。float能让元素从文档流中抽出，它并不占文档流的空间，典型的就是图文混排中文字
环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到古老的IE6
之类的还会有一些bug诸如双边距等等问题。
而position顾名思义就是定位。他有以下这几种属性：static(默
认)，relative(相对定位)，absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间，他
们并不是脱离文档的。absolute和fixed是脱离文档流的，不会占据文档流空间。

比较可以发现，float和position最
大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性，但是这两个并不适合被用
来给整个网页做布局。为什么？因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。

float布局就显得灵活多了。但是一些特殊
的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位，当父级元素是relative的时
候，absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。

如果说到性能问题reflow问
题，将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素
以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间。所以如果是制作js动画等，用absolute或者fixed定位会更好。

说得不好的地方请大家补充。总结一句就是不推荐用position来布局整个页面的大框架，而推荐用float或者文档流的默认方式。