打印本文 打印本文 关闭窗口 关闭窗口
如何正确的理解CSS的float浮动属性？
作者：武汉SEO闵涛  文章来源：敏韬网  点击数1288  更新时间：2010/1/6 5:39:22  文章录入：mintao  责任编辑：mintao
　　首先我们了解到，CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术，在HTML中的所有对象，默认分为两种：块元素(block element)、内联元素(inline element)，虽然也存在着可变元素，但只是随上下文关系确定该元素是块元素或者内联元素。

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

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

　　我们看下面的CSS代码：

div css xhtml xml Example Source Code Example Source Code [www.mintao.net]
.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 css xhtml xml Example Source Code Example Source Code [www.mintao.net]
<div class="left">div left float:none</div>
<div class="right">div right [www.mintao.net]</div>
<div class="leftfloat">div left float:left</div>
<div class="right">div right [www.mintao.net]</div>
<span class="left">span left float:none</span>
<span class="right">span right</span>
打印本文 打印本文 关闭窗口 关闭窗口