css布局的一个小技巧

    时光倒转到2005年，如果这篇文章出现在那时或许更合适。时代在变，在网页设计这个范畴内，我的水平一直都停留在两三年前了，以至于一直以来，面对困惑，苟且了之。时至今日，这些困惑，对于一个普通的网页设计师来说，或许如今不过是常识罢了~（所以请不要拍砖）
    不管怎样，还是要揭露这个问题：通常由于页面左右分栏，不得不使用float属性,如：
<div id="main">
    <div id="left">...</div>
    <div id="right">...</div>               
</div>
<div id="footer">...</div>
但是，一旦设置left，和right层的float属性后，它们两个层就不占main层的空间，因为它们浮动(float)在main之上!虽然，在那弄拙成巧的ie中，情况会和你所需要的一样，但在firefox中，而且事实上理应如此。结果是，随着left层内容的增加，它将与footer重叠，而不是把footer往下撑。
     以前，也没去想到底为什么，总是很无奈的去设置main的height，让它足够高，以容纳left和right层。但这种高度是死的，并不能实现自适应扩展。
     今天，为了弄软件设计与程序开发方法学的一个课程项目，重新折腾起来网页制作这累活，于是和这拦路虎久别重逢。想了想，原来是这么回事。但是怎么解决呢？源码胜于一切。随便download了一个，发现一个奇怪的东西，奥妙就此揭开：
    <div id="main">
        <div id="left">...</div>
        <div id="right">...</div>   
        <div class="cleaner">&nbsp;</div>
    </div>
    <div id="footer">...</div>
class cleaner定义如下：
.cleaner {
clear: both;
height: 0;
font-size: 0;
line-height:0;
visibility: hidden;
content: ' ';
}
原来它就是通过一个洁癖的空白层把main给撑开了，很巧妙吧!这样一来，height仅仅用来设置最底层元素的高度就可以了，对于其他容器来说，都是画蛇添足！