今天在一个项目中用到了两个DIV左右对齐，我用的是左边的：float:left，右边的float:right，
第一种
<body>
<div style="background:#000000;height: 150px ;width:950px";>
</div>
<div style=";width:950px; height: 700px;">
<div style="height: 700px ;width:252px; float:left;">0左</div>
<div style="height: 700px ;width:696px; float:right;">右</div>
</div>
</body>
····························
今天在一个项目中用到了两个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>
上一篇：
DIV+CSS布局大全 如何命名 常用技巧等
下一篇：
JavaScript获取来源域名