页面中横排布局的思考

经过一轮的项目封闭开发，页面制作的动手能力提高了不少，用AW的话说就是被复杂的东西虐过以后很多问题都变得容易了，的确很有道理。

我个人觉得技术学习中不断总结是个很有效的提高过程，同是也是个积累和分享。这里我想总结一下对页面横排布局实现方式的思考。多数人觉得没有必要思考这个，能把页面效果实现就可以了。但我个人还是坚持认为需要思考一下这个问题，下面我来说说自己的看法，也希望得到更多人的意见。

首先我以土豆为例，来解释一下我说的横排布局

经常我们会听到两分栏、三分栏等等，都被我视作横排布局，土豆这个页就是常见的左右两分栏布局，图中我还对其中其他的横排布局做了注释。回想一下，在你曾经切过的页面里是否有很多类似的横排布局，我想答案是肯定的，甚至你制作的一个页面有更多更复杂的横排布局。那么你是怎么来实现他们的呢？下面我来总结一下我知道几种通用可行方法：

一、浮动
　　这是最常见的做法，尤其是在页面大布局（也就是我们常说的两栏、三栏等）时，我们第一个会想到浮动来实现。既然使用了浮动，那么我们需要考虑浮动闭合的问题，通常闭合浮动有下面做法。　　

1、利用clear:both来清楚浮动，原理是在最后一个浮动元素的同级添加一个空便签，并添加clear:both，效果很不错，但增加了一个无语意标签。

2、利用:after伪类，最经典的就是clearfix了，屡试不爽。但除开li这样的列表浮动浮动时本身就有ul这样的父标签可用，这里需要给我们的浮动元素增加一个空的父容器，然后应用clearfix，这样让我们的页面内容的层次嵌套深了一层，如果滥用这样的浮动闭合，那么嵌套的层次自然越来越深。为了实现页面效果，我们大幅度地动了DOM的结构。我觉得这样深的结构对于搜索引擎来讲肯定是只有弊不会有利。搜索引擎本身对页面做清理的时候需要递归这么多层的嵌套，效率自然有消耗。

对于页面重点的内容更应当避免过深的嵌套。（这是土豆首页的一块代码截图，虽然不是clearfix造成的，但我很不解为何要嵌套这么深，而且还是节目内容这么重要的元素。可以在baidu里搜索一下site:www.tudou.com，你会发现收录的基本都是土豆的用户主页，而不是视频。再对比一下其他几个视频站，你会发现区别的。）

3、利用overflow属性。给浮动元素的父级添加overflow，设置为visible之外的任何属性都行，但IE下需要触发layout。从结构上讲和clearfix带来的麻烦一样，滥用会造成页面内容的层次过深。

这上面三中清除浮动的方法都有弊端，因此在使用中需要视不同的情况来确定如何使用。　　

二、绝对定位
　　例如我们要实现两分栏，右侧宽度150px，左侧自适应浏览器。那么我们可以把右侧的容器绝对定位并设定宽度，左侧的容器设置margin-right:150px即可。
　　再以土豆的那个页面中的绿框中的横排布局为例，左侧蓝色框可以设置宽度，绝对定位到left，右侧蓝色框设置margin-left。这里只是为了说明一个思路，其实于这个列表肯定是有空的父标签可用的，完全可以用clearfix解决。

三、内联元素
　　块级和内联特性是HTML标签给我们的原生能力，例如紫色块中的部分我们完全可以用内联的span a 或者直接是text结合a来实现。如果你套个div　或者是一个li列表，然后浮动他们，我觉得反而是做麻烦了。对于内联元素和块级元素的结合布局，我感觉淘宝的页面考虑的比较好，有兴趣的可以去刨刨看。总结一下就是小块的横排布局可以用内联元素来实现的就不要苛求用块级元素来模拟了。

四、表格
　　这是一个争论不休的话题，什么是表格，什么是列表？这个到底是怎么界定了？各有各的道理。就我自己的理解，大块的布局是坚决不会用表格的，例如这个红框的左右布局。如果涉及到多行多列的内联元素，并且需要设置对齐的时候，我会使用表格，当然是做格式数据，不是做布局。

列出上面的这些做法，目的是在于遇到具体情况能够有更广的思考空间，从而选择合理的解决方案，如何实现不关键，关键在于要坚持制作的原则：表现是为内容服务的，尽量不要让内容迁就表现。。

用户看页面关注的是页面设计，前端的代码怎么写用户都不会关心，但搜索引擎甚至是其他平台的系统，它们只认识页面的结构内容，如何让它们正确理解我们的内容，如何让搜索引擎多收录我们的内容这也是前端组在制作的过程中需要思考的问题。