欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

div浮动层与div层有何不同css中有什么关系

div浮动层与div层有何不同css中有什么关系

首先DIV浮动层与DIV层都是指DIV布局,一般使用CSS样式表加DIV标签组合进行布局网页。

div层一般包括div浮动层,div浮动层说明div被加入css浮动样式所以被称为div浮动层,而没有加入float浮动样式不具有浮动效果,所以如果没有被加浮动样式div不被称为浮动层。当然span、h1、ul、li等标签也是层,只不过span、h1、ul、li等标签没有div使用频率高,所以一般就将div作为象征性称呼。

接下来DIVCSS5通过实例告诉大家什么是一般层,什么是浮动层?为什么要使用div css浮动层。

1、完整DIV+CSS实例HTML代码如下

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>div层与浮动层</title> 
  6. <style> 
  7. .divcss5{ width:400px; height:100px} 
  8. .divcss5-a{ float:left; border:1px solid #F00; width:100px; height:80px} 
  9. .divcss5-b{ float:right; border:1px solid #00F; width:100px; height:80px} 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div class="divcss5"> 
  14. <div class="divcss5-a"></div> 
  15. <div class="divcss5-b"></div> 
  16. </div> 
  17. </body> 
  18. </html> 

对象".divcss5"没有设置浮动,“.divcss5-a”设置靠左浮动(float:left),“.divcss5-b”设置靠右浮动(float:right)。

2、普通层与浮动层实例截图

普通层与浮动层CSS案例截图
普通层与浮动层CSS案例截图

3、层与浮动层总结
在以上实例中“.divcss5”对象是普通层,而默认是不具有浮动效果的层,因为网页内容是居左的所以看到此层居左,实际是没有浮动样式的一个DIV盒子层。而对象内子级“.divcss5-a”和“.divcss5-b”是设置float浮动所以变成了浮动层,从上可以看出他俩在“.divcss5”盒子内一个靠左浮动一个靠右浮动。普通层与浮动层区别就是在于是否被设置了css float浮动样式。

4、为什么设置浮动样式
这个是因为想让DIV对象盒子实现靠左或靠右布局。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r648.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-12-02 11:40 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。