　　首先我们了解到，CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术，在HTML中的所有对象，默认分为两种：块元素(block element)、内联元素(inline element)，虽然也存在着可变元素，但只是随上下文关系确定该元素是块元素或者内联元素。关于块元素和内联元素可以参考这里。

　　其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧，关于float属性的详细说明可以参考这里。

　　需要引起你重视的是，float属性不是你所想象的那么简单，不是通过这一篇文字的说明，就能让你完全搞明白它的工作原理的，我们需要在实践中不断的总结经验，应对所出现的问题。我们通过下面的这个小例子，来说明它的基本工作情况。

　　我们看下面的CSS代码：

.left{
       background-color:#cccccc;
       border:2px solid #333333;
       width:200px;
       height:100px;
}
.leftfloat{
       background-color:#cccccc;
       border:2px solid #333333;
       width:200px;
       height:100px;
       float:left;
}
.right{
       background-color:#cccccc;
       border:2px solid #333333;
       height:100px;
}

　　left和right为不作任何浮动的类。leftfloat向左浮动的类。

　　我们再看看xhtml代码：

<div class="left">div left float:none</div>
<div class="right">div right [www.webjx.ocm]</div>
<div class="leftfloat">div left float:left</div>
<div class="right">div right [www.webjx.ocm]</div>
<span class="left">span left float:none</span>
<span class="right">span right</span>

　　我们看运行效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.webjx.com</title> <style type="text/css">  </style> </head> <body> <div class="left">div left float:none</div> <div class="right">div right [www.webjx.ocm]</div> <div class="leftfloat">div left float:left</div> <div class="right">div right [www.webjx.ocm]</div> <span class="left">span left float:none</span> <span class="right">span right</span> </body> </html>

[1] [2] 下一页

上一篇:用CSS如何控制网页中图片自适应大小？

下一篇:不规则文字排版的CSS样式的定义参考方法

合理应用正确理解CSS的float浮动属性相关文章：

·每周电脑应用技巧荟萃

·Windows XP 的超级应用技巧28例

·英文字体创意设计及应用作品欣赏

·Windows XP最新应用技巧六则

·注册表应用100例—注册表使用全攻略之十一

·WindowsXP应用技巧的具体总结

·在桌面应用中使用JAVA DB

·Windows XP系统应用技巧之安装与开关机篇

·在.NET 应用程序中用System.Web.Mail 发送电子邮件

·大容量硬盘好处多如何分区才合理？

合理应用正确理解CSS的float浮动属性相关软件：

·暗黑破坏神 2：毁灭之王 1.10S极品属性装备制作器

·中文版 AutoCAD2004 应用实例与技巧

·嵌入式系统应用开发技术 wmv 视频教程

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源：http://www.viphot.com

	\| 帮助(？) \| 版权声明 \| 友情连接 \| 关于我们 \| 信息发布
Copyright 2007 www.viphot.com All Rights Reserved.	鄂ICP备05000083号Powered by:viphot

合理应用 正确理解CSS的float浮动属性

合理应用正确理解CSS的float浮动属性