联系站长 加入收藏 设为首页 繁體中文 RSS
  首页 | 生活百科 | 电脑网络 | 高手学堂 | 语录名言 | 读书文学 | 极品软件 | 奇趣图片 | 站长微博  
 您的位置: 精品百字节网 >> 电脑网络 >> 网络编程 >> CSS学习 >> 正文 当前没有通告!
   □  如何理解CSS的float(浮动)属性    3星级
如何理解CSS的float(浮动)属性
[ 作者:作者不详     来源:互连网     点击数:     更新时间:2007-07-05     文章录入:Admin
【字体:
[内容提要]
暂无简介
只有正确理解CSS的float属性,才能更好的运用float属性进行网页设计,我们知道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.52css.ocm]</div>
<div class="leftfloat">div left float:left</div>
<div class="right">div right [www.52css.ocm]</div>
<span class="left">span left float:none</span>
<span class="right">span right</span>

运行效果下图:

css

  我们看(1)和(2):容器(1)没有任何浮动,占据了一整行,将(2)挤到了下面一行。而且(2)也占据了一整行的位置。
  我们看(3)和(4):容器(3)声明了左浮动,容器(4)浮动到了它的右侧。实现了这两个容器处于同一行的情况。
  我们看(5)和(6):容器(5)和(6)是span元素,也就是内联元素(inline element),自然的处于同一行。

 

上一篇文章:CSS布局中!important的用法 下一篇文章:用Div+Css做的国旗
发表评论 □告诉好友 □打印此文 □收藏此页 □关闭窗口 □返回顶部
 最新热点文章
 精品医院类网站网址大收集
 如何删除windows 2003或xp系统隐藏的...
 DedeCms管理员后台登陆经常自动退出的...
 知道IP如何用dos命令查出电脑名称
 WORD出错老是要求以安全模式打开文件...
 如何设置首页不显示页眉页脚?
 如何利用inurl命令查询网站外链及栏目...
 
 最新推荐文章
 精品医院类网站网址大收集
 如何利用宽带路由器控制局域网内电脑上...
 CSS圆角代码的实现方法
 带停顿的单行文字滚动代码
 实用的新网站免费收录提交地址精选
 Left join , Right Join, Inner Join用...
 趣话淘宝网衍生的多种新型职业
 
 最新图文
  ◇  网友评论:(只显示最新5条。评论内容只代表网友观点,与本站立场无关!)
关于本站 | 免责申明 | 网站地图 | 联系站长 | 友情链接 | 与我同在
冀ICP备06032589号【虚拟化精英群虚拟化精英群续
  Copyright© 2006-2009 100byte.Com All Rights Reserved
网站声明:本网站是公益性质网站,部分内容来源于网络,如有侵犯您权利的地方,请与精品百字节站长联系,尽快修正.
Powered By CreateLive CMS 本站法律顾问:(冀港)武镇海律师
点击这里给我发消息