DIV两列并排的标准写法——理解CSS中的float

今天在一个项目中用到了两个DIV左右对齐，我用的是左边的：float:left，右边的float:right，如下：

<style type="text/css">

<!--

#col1 {

background:#eeffee none repeat scroll 0% 0%;

float:left;

width:25%;

height:50px;

}

#col2{

background:#eeeeff none repeat scroll 0% 0%;

float:right;

width:75%;

height:50px;

}

--></style>

<div id="main">  <div id="col1">用firebug可以看到这两个div不在上级div（main）中</div>    <div id="col2"></div> </div>

效果是可以实现两者左右对齐，但我需要让两个DIV没有间隙的靠在一起，于是用firebug调试，居然发现这两个DIV都不在他的上一级ID为main的DIV中（你也可以用firebug调试下看看），我调试了很久，最后删掉CSS中的float:left和float:right，才可以看到终于在main中了。

我隐约想起float的意思就是浮动，应该是浮动在上一级DIV层上的，所以当然不在上一级层中了，查了一下小雨的CSS手册，确实如此。平常以为不写float那么默认就是float=left，其实完全不是的，默认是不浮动的。加个float:left与不加是完全不一样的。

导致犯这个错的原因是我做web开发一直不求甚解，只要求达到效果就行，能灵活运用就行。对理论的都不是很熟，所以才导致这个错误。不过这样也才能真正明白float的作用（我想看CSS教程很难理解出来吧）。

所以这样看来，用float做DIV左右定位并不是很好的选择，怪不得yaml框架中实现两列并排（三列并排另当别论）只用了左边的float:left，右边的都不用float:right，而是设定margin-left来达到效果，这才是DIV并排的标准写法（这样可以仍受上级DIV的限制，而不是像float:left、float:right那样乱浮动，上级main都没法控制它们了），例子如下：（注意这时还是必须设float:left，这样才能使col2往上移，与之并排，col1还是浮动层的，不在main中，但col2在main中，两个div只跟一个div的高度一样）

<style type="text/css">

<!--

#col1 {

background:#eeffee none repeat scroll 0% 0%;

float:left;

width:25%;

height:50px;

}

#col2{

background:#eeeeff none repeat scroll 0% 0%;

margin-left:25%;

height:50px;

}

--></style>  <div id="main">  

<div id="col1">用firebug可以看到这两个div在上级div（main）中</div>    <div id="col2"></div> </div>  <div> </div>  <div> </div>  <div>总结，做DIV并排布局的时候，要保证有且只有一个DIV不是浮动的（没有float属性）。</div>