将张鑫旭精简了一下 http://www.zhangxinxu.com/wordpress/2010/10/%E9%A1%B5%E9%9D%A2%E9%87%8D%E6%9E%84%E2%80%9C%E9%91%AB%E4%B8%89%E6%97%A0%E5%87%86%E5%88%99%E2%80%9D-%E4%B9%8B%E2%80%9C%E6%97%A0%E5%AE%BD%E5%BA%A6%E2%80%9D%E5%87%86%E5%88%99/
页面重构“鑫三无准则” 之“无宽度”准则
无宽度指的是宽度分离，并不是指没有宽度
使用宽度计算+横向拼接的做法不仅浪费精力、开发成本，最终实现的页面其实也是比较脆弱的。举个实际点的例子，比如新浪微博内容列表布局，用firebug看了下其布局的方式，结果就是定宽的浮动布局。左边头像左浮动，宽度56像素；右侧内容484像素，右浮动。如下图所示：
这是个比较简单的两栏布局，这里宽度限定，左右浮动，这也是目前主流布局方式。但是主流的方法并不一定是最好的方法，就此例子而言，没有左右padding/margin/border等属性，所以右侧栏的宽度(484px)确定貌似还是比较简单的（事实上还是要去量一下，这是可避免的劳力成本）；但是，其扩展性和重用性则完全不及格了，首先，这里的列表不可能放在500像素宽的div中（没有了重用性），日后要是网站改版，总体宽度增加，那么显然，这里的宽度又要重新计算，这就缺少了扩展性；同时，这种浮动布局会带来一些副作用，首先是浮动本身的代码成本，其次是清除浮动所需要的成本。(如下图)
“无宽度”之实现
“无宽度”具体指的是没有固定的宽度值（尤其是以px为单位的宽度值，em需看具体情况，%百分值不在其中）
这是比较简单的也是比较基本的两栏布局，一般这种layout我们需要借助一些平时会给我们带来麻烦的，本身带刺的一些CSS属性，那就是float以及position:absolute属性，我在“absolute绝对定位的非绝对定位用法”一文中就多次提到我的这个观点：未设定left/top值的absolute元素和float元素就是两个混蛋近亲，同样的都是“包裹与破坏”，但是，虽然很多时候，这种破坏会给我们带来些麻烦（例如清除浮动造成的高度塌陷的问题），但是，万物皆有两面性，我们有时候可以利用这种破坏的特性来帮助我们进行更加有韧性的布局。
如下图是重构之后的代码
相比原来的代码，只是把头像的56像素宽度左浮动和484像素内容宽度右浮动改成position:absolute和padding-left:76px，然后，实现的效果就是一模一样了，不仅代码量少了，布局也更有扩展性。同时，也不需要什么清除浮动之类的代码了：
整个布局的CSS代码就非常之清爽，没有浮动，没有计算，也没有清除浮动，而且扩展性强。
.abs{position:absolute;}
.pl76{padding-left:76px;}
facebook在个人主页动态列表使用的定位方法：
但是，facebook这里的absolute定位属于标签内定位，外套relative属性限制，好处在于可以直接忽略我上面提到的不少需要注意的细节，且易于理解掌握，但是不足在于CSS代码量，开销，开发成本都比较大。所以，个人权衡来讲，还是直接的外标签裸absolute属性方法更好些。
还有，今天我去看facebook首页好友动态列表的代码，发现了一个很牛逼的方法，float外加table-cell方法（table-cell的宽度上千上万却依然布局良好，很神奇），我琢磨着，可能是因为国外基本上不鸟IE6浏览器的缘故，所以会果敢的使用display:table-cell属性，此方法要想在国内盛行，还需有段时日。
Tip
position与float在例子中的表现有所不同，当页面宽度小，右列内容比较多时，两者没有区别。
当页面宽度很大，右列内容所显示的高度比左列小时，就会发现父元素的表格不一致了。使用position时，父元素框架不会被撑开。而使用float时，父元素框架会同样被撑开，显示起来较为美观。
结论：使用float进行宽度自适应会比较好。