正确的理解CSS的float(浮动)属性

只有正确理解CSS的float属性&＃xff0c;才能更好的运用float属性进行网页设计&＃xff0c;我们知道CSS网页布局的原理&＃xff0c;就是按照HTML代码中对象声明的顺序&＃xff0c;以流布局的方式来显示它&＃xff0c;而流布局就不得不说到float浮动技术&＃xff0c;在HTML中的所有对象&＃xff0c;默认分为两种&＃xff1a;块元素(block element)、内联元素(inline element)&＃xff0c;虽然也存在着可变元素&＃xff0c;但只是随上下文关系确定该元素是块元素或者内联元素。关于块元素和内联元素可以参考这里。

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

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

　　我们看下面的CSS代码&＃xff1a;

.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代码&＃xff1a;

div right [www.52css.ocm]

div left float:left

div right [www.52css.ocm]

span left float:none
span right

运行效果下图&＃xff1a;

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