论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{CSS}DIVCSS布局:CSS浮动float属性详解

文章类别:div+css布局 | 发表日期:2008-9-26 11:34:02

  21shipin.com原创,未经本站同意,严禁转载!

  在传统的表格布局中,我们对表格应该对齐方式对实现了对布局的应用,而应用Web标准构建网页以后,float浮动属性是布局中非常重要的属性,我们经常通过对div元素应用float浮动来进行布局,不但对整个版式进行规划,也可以对一些基本元素如导航等进行排列。

  我们来看看float属性基本释义:
  该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。

  float属性的参数:
  none:对象不浮动
  left:对象浮在左边
  right:对象浮在右边

  下面我们通过一些测试来了解可能出现的一些情况,假如float取值为none则不会发生任何浮动,块元素独占一行,紧随其后的块元素将在新行中显示,如下图:


  我们看下面的运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  我们对content_a应用向左的浮动。而content_b不应用任何浮动。

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  我们看在IE6中的效果:


  我们看在FF中的效果:


  在IE中,对content_a应用向左的浮动后,content_a向左浮动,content_b在水平方向仅跟着它的后面。
  在FF中,对content_a应用向左的浮动后,content_b在水平方向容器不可见,只留下了文字。
  我们同时对这两个容器应用向左的浮动看看发生的现象。

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  在IE中的效果如图:


  在FF中的效果如图:


  在IE与FF中,他们的效果基本取得了一致。在布局中,我们可应用这类IE与FF兼容的方法。

  我们对content_b应用向左的浮动。而content_a不应用任何浮动。看看是何效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  在IE中的效果如图:


  在FF中的效果如图:


  在IE与FF中均未有太大的变化。在IE中,应用浮动后的content_b却造成了一个双边距的BUY。汗一个先。关于IE的双边距BUY请参考这里:http://www.21shipin.com/article.asp?id=144

  向左浮动会出现何种状态呢?在向右浮动后,最大的变化就是在HTML中,前面的元素在最右边,后面的元素跑到了最左边。

  我们对上面代码中的两个元素同时应用向右的浮动看看效果。

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  在IE中的效果如图:


  在FF中的效果如图:


  同时对两个元素应用向右的浮动基本保持了一致,但请注重方向性,第二个在左边,第一个在右边。

  对于其它页面构成元素,浮动的原理基本是一样的,大家多动手测试,才能有更进一下的熟悉。学习CSS就是多动手,多写代码,必有收获!
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058