软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > 如何正确的理解CSS的float浮动属性?

如何正确的理解CSS的float浮动属性?

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

  其实CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式。block对象设置了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.veryhuo.com]</div>
<div class="leftfloat">div left float:left</div>
<div class="right">div right [www.veryhuo.com]</div>
<span class="left">span left float:none</span>
<span class="right">span right</span>


提示:可修改后代码再运行!

    相关阅读
    栏目导航
    推荐软件