DIV+CSS布局:CSS浮动float属性详解

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

DIV CSS布局:CSS浮动float属性详解

在传统的表格布局中,我们对表格应该对齐方式对实现了对布局的应用,而应用Web标准构建网页以后,float浮动属性是布局中非常重要的属性,我们常常通过对div元素应用float浮动来进行布局,不但对整个版式进行规划,也可以对一些基本元素如导航等进行排列。

我们来看看float属性基本释义:

该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。

float属性的参数:

none:对象不浮动

left:对象浮在左边

right:对象浮在右边

下面我们通过一些测试来了解可能出现的一些情况,如果float取值为none则不会发生任何浮动,块元素独占一行,紧随其后的块元素将在新行中显示,如下图:

我们看下面的运行效果:

Source Code to Run

Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">

/>52CSS

这是第一个DIV

id="content_b">这是第二个DIV

[ 可先修改部分代码再运行查看效果]

我们对content_a应用向左的浮动。而content_b不应用任何浮动。

Source Code to Run

Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">

/>52CSS 这是第一个DIV 向左浮动

这是第二个DIV 不应用浮动

[ 可先修改部分代码再运行查看效果]

我们看在IE6中的效果:

我们看在FF中的效果:

在IE中,对content_a应用向左的浮动后,content_a向左浮动,content_b在水平方向仅跟着它的后面。

在FF中,对content_a应用向左的浮动后,content_b在水平方向容器不可见,只留下了文字。这是由于未清除浮动所造成的现象,关于清除浮动,可以参考这里:

/article.asp?id=132(overflow:auto;)这就是IE与FF对此种情况的不同解决,我们在实际布局中,应该避免这样的情况发生。

我们同时对这两个容器应用向左的浮动看看发生的现象。

Source Code to Run

Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">

/>52CSS

这是第一个DIV 向左浮动

这是第二个DIV 向左浮动

[ 可先修改部分代码再运行查看效果]

在IE中的效果如图:

在FF中的效果如图:

相关文档
最新文档