DIVCSS布局：CSS浮动float属性详解_第1页
DIVCSS布局：CSS浮动float属性详解_第2页
DIVCSS布局：CSS浮动float属性详解_第3页
DIVCSS布局：CSS浮动float属性详解_第4页
DIVCSS布局：CSS浮动float属性详解_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、DIV CSS布局：CSS浮动float属性详解在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用Web标准构建网页以后，float浮动属性是布局中非常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。我们来看看float属性基本释义：该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。float属性的参数：none：对象不浮动left：对象浮在左

2、边right：对象浮在右边下面我们通过一些测试来了解可能出现的一些情况，如果float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示，如下图：我们看下面的运行效果：Source Code to Run<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML1.0Transitional/EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="/1999/

3、xhtml"> <head><metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/><title>52CSS</title> <style type="text/css">#content_a width:200px; height:80px; border:1px solid #000;margin:10px; background:#ccc; #content_b width:

4、200px; height:80px;border:1px solid #000; margin:10px; background:#999; </style></head> <body> <div id="content_a">52CSS.com这是第一个DIV</div> <divid="content_b">52CSS.com这是第二个DIV</div> </body> </html> 可先修改部分代码 再运行查看效果 我们对content_

5、a应用向左的浮动。而content_b不应用任何浮动。Source Code to Run<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML1.0Transitional/EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"> <head><metahttp-equiv="Content-Type" c

6、ontent="text/html; charset=gb2312"/><title>52CSS</title> <style type="text/css">#content_a width:200px; height:80px; float:left; border:1px solid#000; margin:10px; background:#ccc; #content_bwidth:200px;height:80px; border:1px solid #000; margin:10px;backgrou

7、nd:#999;</style> </head> <body> <divid="content_a">52CSS.com 这是第一个DIV 向左浮动</div> <divid="content_b">52CSS.com 这是第二个DIV 不应用浮动</div> </body></html> 可先修改部分代码 再运行查看效果 我们看在IE6中的效果：我们看在FF中的效果：在IE中，对content_a应用向左的浮动后，content_a向左浮动，co

8、ntent_b在水平方向仅跟着它的后面。在FF中，对content_a应用向左的浮动后，content_b在水平方向容器不可见，只留下了文字。这是由于未清除浮动所造成的现象，关于清除浮动，可以参考这里： （overflow:auto;）这就是IE与FF对此种情况的不同解决，我们在实际布局中，应该避免这样的情况发生。我们同时对这两个容器应用向左的浮动看看发生的现象。Source Code to Run<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML1.0Transitional/EN""/TR/xht

9、ml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"> <head><metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/><title>52CSS</title> <style type="text/css">#content_a width:200px;

10、 height:80px; float:left; border:1px solid#000; margin:10px; background:#ccc; #content_bwidth:200px;height:80px; float:left; border:1px solid #000;margin:10px;background:#999; </style> </head> <body><divid="content_a">52CSS.com 这是第一个DIV 向左浮动</div><divid=&qu

11、ot;content_b">52CSS.com 这是第二个DIV 向左浮动</div> </body></html> 可先修改部分代码 再运行查看效果 在IE中的效果如图：在FF中的效果如图：在IE与FF中，他们的效果基本取得了一致。在布局中，我们可应用这类IE与FF兼容的方法。我们对content_b应用向左的浮动。而content_a不应用任何浮动。看看是何效果：Source Code to Run<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML1.0Transitional/EN"&

12、quot;/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"> <head><metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/><title>52CSS</title> <style type="text/css"

13、;>#content_a width:200px; height:80px; border:1px solid #000;margin:10px; background:#ccc; #content_b width:200px;height:80px;float:left; border:1px solid #000; margin:10px; background:#999;</style> </head> <body> <divid="content_a">52CSS.com 这是第一个DIV 不应用浮动</d

14、iv> <divid="content_b">52CSS.com 这是第二个DIV 向左浮动</div> </body></html> 可先修改部分代码 再运行查看效果 在IE中的效果如图：在FF中的效果如图：在IE与FF中均未有太大的变化。在IE中，应用浮动后的content_b却造成了一个双边距的BUY。汗一个先。关于IE的双边距BUY请参考这里：向左浮动会出现何种状态呢？在向右浮动后，最大的变化就是在HTML中，前面的元素在最右边，后面的元素跑到了最左边。我们对上面代码中的两个元素同时应用向右的浮动看看效果。Sou

15、rce Code to Run<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML1.0Transitional/EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="/1999/xhtml"> <head><metahttp-equiv="Content-Type" content="text/html; chars

16、et=gb2312"/><title>52CSS</title> <style type="text/css">#content_a width:200px; height:80px; float:right; border:1px solid#000; margin:10px; background:#ccc; #content_b width:200px;height:80px; float:right; border:1px solid #000;margin:10px;background:#999; </style> </head> <body><divid="content_a">52CSS.com 这是第一个DIV 向

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论