其实这个问题，我现在比较喜欢使用 float 毕竟对于很多东西，代码量明显减少，不用对很多元素都应用样式，但是各有各的好处，其实还是按个人习惯加上团队的开发习惯来比较好，这里转这篇文章，其实不是完整的一篇，而是来源于知乎 中的“在 CSS 布局中，用 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或者文档流的默认方式。
PS：
补充一下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的进化能够让我们重建这样的信任。
上面是两个人的回答，都比较有代表性，虽然有些内容是重复的，但是还是建议好好看完，并且最好理解了。
不多说，先上代码。还是放在最后吧。
首先就是引入 jQuery 库.
<script type="text/javascript" src="js/jQuery.v1.4.2.js"></script>
然后就是使用 CSS 的定位，将要显示的子层，也就是鼠标移上去显示的 “分享” 和 “收藏” 等文字，定位到父层，也就是图片的某个位置，此处首先给父层一个相对定位的属性（相对定位不给 top 和 left 的话，是不会影响其在文档中的位置），然后给子层一个绝对定位，此时子层脱离文档流，就可以悬浮在文档之上了，此处只是形容，当然也可以这么理解，然后使用 top 和 left 属性，即可使 “分享” 和 “收藏” 等文字处在父层的某个位置。
<style>
/*reset*/
body,div,img,{margin:0;padding:0;}
/*content*/
body {
margin:0 auto;
background:#FFF;
}
.pro {
width:75px;
margin:100px auto 0 auto;
}
.floatTop {
position:relative;
width:75px;
height:75px;
background:#ccc;
}
.fa {
display:block;
width:75px;
height:75px;
}
.tips {
display:none;
position:absolute;
padding:6px 2px 2px 6px;
top:0;
left:0;
font-size:13px;
background:rgba(230,230,230,0.6);
}
a {
text-decoration:none;
}
</style>
当然了，在使效果出来之前，应该先使子层可见，等将其定位之后，再给子层 display:none; 的属性，使子层隐藏。然后对其应用 jQuery 即可。
下来就是 jQuery 代码，此处使用了 hover() 方法，其实和 CSS 中的 hover 伪类类似，即当鼠标悬停时出现的效果。此处给两个函数，即当鼠标悬浮时，执行第一个函数，即找到当前的 jQuery 对象（$(this)，也就是 .floatTop）的子对象 tips （children(“.tips”)），然后应用 fadeIn() 动画，即 500 毫秒内显示。
当鼠标离开时，再执行另一个函数，前面都一样，后面的 fadeOut() 即 500 毫秒内隐藏。
<script type="text/javascript">
$(function(){
$(".floatTop").hover(function(){
$(this).children(".tips").fadeIn(500);
},function(){
$(this).children(".tips").fadeOut(500);
});
});
</script>
这里是全部的代码，高手指教，低手学习。
<html>
<head>
<script type="text/javascript" src="js/jQuery.v1.4.2.js"></script>
<style>
/*reset*/
body,div,form,input,textarea,p,{margin:0;padding:0;}
/*content*/
body {
margin:0 auto;
background:#FFF;
}
.pro {
width:75px;
margin:100px auto 0 auto;
}
.floatTop {
position:relative;
width:75px;
height:75px;
background:#ccc;
}
.fa {
display:block;
width:75px;
height:75px;
}
.tips {
display:none;
position:absolute;
padding:6px 2px 2px 6px;
top:0;
left:0;
font-size:13px;
background:rgba(230,230,230,0.6);
}
a {
text-decoration:none;
}
</style>
</head>
<body>
<div class="pro">
<div class="floatTop">
<a class="fa" href="images/gs1.gif"><img src="images/gs1.gif" /></a>
<div class="tips">
<a class="fx" href="#fx">分享</a>|<a class="sc" href="#sc">收藏</a>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".floatTop").hover(function(){
$(this).children(".tips").fadeIn(500);
},function(){
$(this).children(".tips").fadeOut(500);
});
});
</script>
<body>
</html>
演示在这里： 点击这里
毋庸置疑，CSS 中的 定位 对于从事重构或者前端的人来说，其占用非常重要的地位，但是对于初学者来说，却又有几点不是很清楚，这里就向大家介绍下 CSS 中的 定位 是如何工作的。
首先，我们来看下，什么是 定位。
当浏览器下载页面内容的时候，按下载的 HTML 页面内容的顺序（例如，html、body、head、div、p等），同时就开始渲染页面，而 定位 则就是决定这些元素如何显示，例如相对位置、或者重叠等情况。其实也就是本体相对于上级的定位，这里一共有4种方式来定义 定位，其分别是：static, relative, absolute 和 fixed。其意思也即是 静态、相对、绝对、固定。
Static 定位
即静态定位，也就是在制作 HTML 页面时，元素如何排列，则定位就如何排列。从上往下的顺序。没什么可解释的。
Relative 定位
即相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TOP、RIGHT、BOTTOM、LEFT进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。更多…
此教程，完全使用CSS3 制作一个动态的导航菜单，不使用 JavaScript 等技术。
先来看 HTML
首先第一步是使用HTML完成网站的结构，此处 使用了很多 HTML5 方面的内容，但是对于IE6 7 8来说，必须使用另一种技术来使其支持 HTML5，这里使用 html5.js （详细 ），需要放在 <Head> 标签之中，使用了条件判断，只对IE有效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Including the Lobster font from Google's Font Directory -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<!-- Enabling HTML5 support for Internet Explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>CSS3 Animated Navigation Menu</h1>
<h2>« Read and download on Tutorialzine</h2>
</header>
<nav>
<ul class="fancyNav">
<li id="home"><a href="#home" class="homeIcon">Home</a></li>
<li id="news"><a href="#news">News</a></li>
<li id="about"><a href="#about">About us</a></li>
<li id="services"><a href="#services">Services</a></li>
<li id="contact"><a href="#contact">Contact us</a></li>
</ul>
</nav>
<footer>Looks best in Firefox 4, usable everywhere.</footer>
</body>
</html>
此处使用了Google Web Font API,包括了100多种字体文件，可以随时使用在自己的项目上，当然都托管在 Google 的服务器上，不过几乎都是英文字体，对国内用处不是非常大。更多…