专注于互联网--专注于架构

 最新标签
网站地图
文章索引
Rss订阅

首页 »Html教程 » cssfloat:如何正确的理解CSS的float浮动属性？  »正文

cssfloat:如何正确的理解CSS的float浮动属性？ 

来源: 发布时间:星期四, 2009年2月12日 浏览:163次 评论:0


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

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

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

　　我们看下面CSS代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
.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代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<div =\"left\">div left float:none</div>
<div =\"right\">div right [www.52css.ocm]</div>
<div =\"leftfloat\">div left float:left</div>
<div =\"right\">div right [www.52css.ocm]</div>
<span =\"left\">span left float:none</span>
<span =\"right\">span right</span>


　　我们看运行效果:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.com]

    =\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]


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

相关文章

读者评论

发表评论

  • 昵称：
  • 内容：

热门标签

精华推荐

最新标签

Dig排行

阅读排行

最新文章