YAML对三栏布局中CSS浮动问题的解决 – Perchouli 的技术文章和其他文章Blog

Preface

Mentor在项目中提到一种叫做YAML的置标语言。在网上搜了一下，这是一种强调可读性，以数据为中心的置标语言，YAML的意思是YAML Ain’t a Markup Language(YAML不是一种置标语言)，语法比较简单，Structure通过空格来展示。Sequence里的项用”-“来代表，Map里的键值对用”:”分隔，知道这几点就可以了，YAML比JSON还简单，借用官方的说法，是一种非常Friendly的格式。

很有趣的是我同时搜到了一个CSS框架，也叫YAML，不过这里是YAML是Yet Another Multicolumn Layout(另一个多栏布局)的缩写。本文主要针对的是后一个YAML，但不侧重于它的用法，而是学习它的写法。

YAML

YAML又一次体现了德国人的严谨作风，它有一份优秀易读，循序渐进的文档，有良好的目录结构，详细的注释，兼容所有我能找到的浏览器(包括IETEST上的IE5.5)，而且考虑到了对网页打印格式的兼容。

在继续以下的无聊内容之前，先来看一个有趣的东西，YAML的在线Builder，可以以所见即所得的制作样式，它可以使用YAML已所见即所得的方式生成可用的HTML+CSS。

Float

好，然后才是本文真正的中心，关于浮动。想整理这个问题是因为老霍(公司的前端，可以一个人完成公司几乎所有前端页面的神人= =||)，刚讲了XHTML的课，其中特地讲到了浮动。

首先是对浮动做一点小科普，已经非常熟悉的同学请跳过这一段。

我们最开始接触前端代码时，肯定用div做过两栏布局，或者是用li做过菜单。这时候就要给div或者是li设置float:left|right的样式，然后这些div和li就会排成一排了。这是因为当元素被声明为浮动对象时，就脱离了标准文本流，之后的元素会围绕在它周围，所以最初浮动常被用来处理图文混排的问题。比如上一节中靠左对齐的图片。但文本流不能自动停止，所以需要手动添加额外的html代码，常见的是添加一个空的p标签或者hr标签。

<p style="clear:left;"> </p>

另一种方法可以参看How To Clear Floats Without Structural Markup一文，他定义了一个clear:both的类来实现：


.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

这种方法在IE中并不适用(虽然文中也给出了IE的解决方法)，因为IE不支持伪类:after。float在IE中会产生很多问题，比如我们熟知的float双倍margin，IE6的3px问题等等。

YAML对三栏布局的处理很值得学习。三栏布局要求左右两侧的容器——记作#col1和#col2——大小固定，中间的#col3容纳内容，是三个容器中最长的。用float来做三栏布局看起来很简单，但要完美兼容所有浏览器，能很好的适应内容就不那么简单了，我之前曾用这个问题来做前端的面试题，刷掉了不少人。

YAML将#col1和#col2设置为浮动，#col3则是静态的，#col1和#col2位于#col3之前，处于同一层级，然后固定#col1和#col2的宽度，#col3则设置左右两边的margin为#col1和#col2的宽度，就可以避免容器#col3中的内容和其他两个浮动栏产生冲突，让#col3的内容位于#col1和#col2之间。


#col1 {
    float: left;
    width: 200px; /* Standard value */
}
#col2 {
    float: right;
    width: 200px; /* Standard value */
}
#col3 {
    width:auto;
    margin-left: 200px; /* Standard value*/
    margin-right: 200px; /* Standard value */
}

在清除浮动的问题上，YAML利用上文提到的:after伪类来实现，不过做了一些特殊的处理。我们都知道，clear:both在静态容器中——比如上文提到#col3——是面向全局的，也就是说你设置之后，所以在#col3中就会产生垂直空间，YAML为了解决这个问题，使用了overflow


/* Clearing with overflow */
.floatbox { overflow:hidden; }
/* 触发haslayout,  这些都被YAML单独写在iehack.css中 */
/* .floatbox adjustment for IE */
* html .floatbox {width:100%;}

这样就不会产生垂直空间了。同时在浮动内容的外面也套上这个容器，就可以避免浮动图片从文本流中脱离的问题。

Afterword

我用过的CSS框架并不多，960px.gs一直是当成布局规范来用，并未视作一个css框架；clearCSS和YUI的一个CSS框架也有在用，但坦白来说并没有给我节约太多时间。YAML德语主页的pagerank高达8，应该是一个非常流行的css框架了。虽然对于我现在的工作中项目来说没什么太大帮助，但以后自己做什么小项目的时候，还是会考虑它的。