合理应用,正确理解CSS的float浮动属性
2008-12-04 16:40
232 查看
首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术,在HTML中的所有对象,默认分为两种:块元素(block element)、内联元素(inline element),虽然也存在着可变元素,但只是随上下文关系确定该元素是块元素或者内联元素。关于块元素和内联元素可以参考这里。
其实CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后,它将不再独自占据一行。可以浮动到左侧或右侧,关于float属性的详细说明可以参考这里。
需要引起你重视的是,float属性不是你所想象的那么简单,不是通过这一篇文字的说明,就能让你完全搞明白它的工作原理的,我们需要在实践中不断的总结经验,应对所出现的问题。
我们通过下面的这个小例子,来说明它的基本工作情
.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.jzxue.com]</div> <div class="leftfloat">div left float:left</div> <div class="right">div right [www.jzxue.com]</div> <span class="left">span left float:none</span> <span class="right">span right</span>
我们看(1)和(2):容器(1)没有任何浮动,占据了一整行,将(2)挤到了下面一行。而且(2)也占据了一整行的位置。
我们看(3)和(4):容器(3)声明了左浮动,容器(4)浮动到了它的右侧。实现了这两个容器处于同一行的情况。
我们看(5)和(6):容器(5)和(6)是span元素,也就是内联元素(inline element),自然的处于同一行。
相关文章推荐
- css 浮动 理解Float的含义
- 理解与应用css中的display属性
- CSS 浮动--float与Clear的应用
- CSS中元素内容的浮动属性float
- CSS 浮动 float 清除浮动 clear 最容易理解的文章
- 理解与应用css中的display属性
- CSS 浮动--float与Clear的应用
- CSS float 浮动属性详解
- WEB前端开发学习----5.理解 CSS 浮动float
- CSS中,float浮动的理解
- 揭开迷惑 理解CSS的浮动标签Float(转)
- DIV + CSS浮动属性Float详解
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
- css float 浮动属性
- 理解与应用css中的display属性
- CSS-深入理解之float浮动
- CSS教程:理解继承属性及应用
- CSS中float浮动属性
- css中 float浮动 属性
- CSS float浮动属性