你对CSS浮动float属性的使用是否了解，这里和大家分享一下，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。
DIV CSS布局：CSS浮动float属性详解
在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用Web标准构建网页以后，float浮动属性是布局中非常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。
float属性基本释义：
该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。
float属性的参数：
none：对象不浮动
left：对象浮在左边
right：对象浮在右边
下面我们通过一些测试来了解可能出现的一些情况，如果float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示，如下图：
我们看下面的运行效果：
SourceCodetoRun
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-
-
- content="text/html;charset=gb2312"/>
- 52CSS title> </li>
<li><styletypestyletype="text/css"> </li>
<li>#content_a{width:200px;height:80px;border:1pxsolid#000;</li>
<li>margin:10px;background:#ccc;} </li>
<li>#content_b{width:200px;height:80px;border:1pxsolid#000;</li>
<li>margin:10px;background:#999;} </li>
<li> style> </li>
<li> head> </li>
<li><body> </li>
<li><dividdivid="content_a">52CSS.com这是第一个DIV div> </li>
<li><dividdivid="content_b">52CSS.com这是第二个DIV div> </li>
<li> body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p>[可先修改部分代码再运行查看效果]#p#</p><p>我们对content_a应用向左的浮动。而content_b不应用任何浮动。</p><p>SourceCodetoRun</p><pre>
<ol>
<li></li>
<li>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li>
<li><htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> </li>
<li><head> </li>
<li><metahttp-equivmetahttp-equiv="Content-Type"content="text/html;</li>
<li>charset=gb2312"/> </li>
<li><title>52CSS title> </li>
<li><styletypestyletype="text/css"> </li>
<li>#content_a{width:200px;height:80px;float:left;border:1pxsolid#000;</li>
<li>margin:10px;background:#ccc;} </li>
<li>#content_b{width:200px;height:80px;border:1pxsolid#000;margin:10px;</li>
<li>background:#999;} </li>
<li> style> </li>
<li> head> </li>
<li><body> </li>
<li><dividdivid="content_a">52CSS.com这是第一个DIV向左浮动 div> </li>
<li><dividdivid="content_b">52CSS.com这是第二个DIV不应用浮动 div> </li>
<li> body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p> [可先修改部分代码再运行查看效果]</p><p> 我们看在IE6中的效果：</p><p><p> 我们看在Firefox中的效果：</p><p><p> 在IE中，对content_a应用向左的浮动后，content_a向左浮动，content_b在水平方向仅跟着它的后面。</p><p> 在Firefox中，对content_a应用向左的浮动后，content_b在水平方向容器不可见，只留下了文字。这是由于未清除浮动所造成的现象，关于清除浮动，可以参考这里：http://www.52css.com/article.asp?id=132这就是IE与Firefox对此种情况的不同解决，我们在实际布局中，应该避免这样的情况发生。</p><p> 【编辑推荐】</p><ol>
<li>CSS Sprites对CSS布局的意义</li><li>如何使用CSS框架这把双刃剑？</li><li>CSS中font-size属性值四大种类</li><li>解析四大CSS属性值选择器用法</li><li>专家推荐 DIV CSS表单布局的五个小技巧</li></ol> <br>
分享文章：CSS浮动float属性用法详解 <br>
文章分享：<a href="http://jkwzsj.com/article/coehegp.html">http://jkwzsj.com/article/coehegp.html</a>
</div>
</div>
<div class="other">
<h3>其他资讯</h3>
<ul>
<li>
<a href="/article/cogpjps.html">新手必读：我是如何写出高质量原创文章的</a>
</li><li>
<a href="/article/cogppcd.html">如何制作一款*的app软件,制作app软件的基本流程</a>
</li><li>
<a href="/article/cogppop.html">怎么做自己的网站</a>
</li><li>
<a href="/article/cogppsc.html">基于Redis和EF的高效数据标准化实践（基于redis和ef）</a>
</li><li>
<a href="/article/cogppcj.html">VPS独立IP原理解析：从网络层面解释独立IP的作用和意义</a>
</li> </ul>
</div>
</div>
<footer>
<div class="foot container">
<div class="footl fl">
<h3>联系我们</h3>
<dl>
您好HELLO!<br>
感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们，
我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。
</dl>
<ul>
<li>电话：028- <span>86922220 18980695689</span></li>
<li>商务合作邮箱：631063699@qq.com</li>
<li>合作QQ： 532337155</li>
<li>成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼</li>
</ul>
</div>
<div class="footr fr">
<h3>乐尚佳建站工作室</h3>
<dl>
成都乐尚佳网站建设公司拥有多年以上互联网从业经验的精英团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。
我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，乐尚佳建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！
</dl>
<h3>乐尚佳观点</h3>
<dl>
相对传统的成都网站建设公司而言，乐尚佳鼎是互联网中的网站品牌策划精英，我们精于企业品牌与互联网相结合的整体战略服务。<br>
我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。
</dl>
</div>
</div>
<div class="link">
<div class="container"> <span> 友情链接：</span>
<a href="http://www.qmuzp.com/" title="成都公司注销代办" target="_blank">成都公司注销代办</a> <a href="http://www.czfdjzy.com/" title="czfdjzy.com" target="_blank">czfdjzy.com</a> <a href="http://www.nxgcgz.com/" title="成都柴油发电机维保" target="_blank">成都柴油发电机维保</a> <a href="http://www.typanxi.com/" title="成都门头招牌制作" target="_blank">成都门头招牌制作</a> <a href="http://www.mghxyx.com/" title="德阳柴油发电机租赁" target="_blank">德阳柴油发电机租赁</a> <a href="http://www.wkslyf.com/" title="成都网站建设" target="_blank">成都网站建设</a> <a href="http://www.weibaofdj.com/" title="四川发电机维保" target="_blank">四川发电机维保</a> <a href="http://www.cymusu.com/" title="成都青羊区公司注册代办" target="_blank">成都青羊区公司注册代办</a> <a href="http://www.giekh.com/" title="成都展架展板定制" target="_blank">成都展架展板定制</a> <a href="http://m.cdxwcx.com/seo.html" title="网站推广优化" target="_blank">网站推广优化</a> </div>
</div>
<div class="copy">
