陈方毅 @返还网

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

效果是可以实现两者左右对齐，但我需要让两个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的高度一样）