立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 5171|回复: 0

[DIV+CSS 教程笔记02] 第十五课 div css当中DIV浮动原理和应用详解答

[复制链接]
发表于 2014-12-3 23:09:26 | 显示全部楼层 |阅读模式
道勤网-数据www.daoqin.net

亲注册登录道勤网-可以查看更多帖子内容哦!(包涵精彩图片、文字详情等)请您及时注册登录-www.daoqin.net

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 asp老师 于 2014-12-4 14:23 编辑

那么上节课我们讲了在div 和css当中的 margin外边距 和padding内边距的设置方法以及关于如何去设置她们的数值的方法,如果您还对div css当中的知识不太清楚的话,您可以参考这个文件:
第十四课 div css当中 DIV内边距和外边距概念讲解
好,那么我们开始今天的课程了,首先呢,我们新建一个15.html的文件以及15.css的文件,并且我们把这个15.css文件引入我们的15.html当中15.html当中的源代码如下:
  1. <body>
  2. <div class="aaa">111</div>
  3. <div class="bbb">222</div>

  4. </body>
复制代码
15.css文件代码如下;
  1. .aaa{width:300px; height:150px; background:#F00;}
  2. .bbb{width:300px; height:150px; background:#0F0;}
复制代码
那么此时的效果如下:
01.jpg
此时呢,我们可以介绍下文本流的概念:我们写一排很多的文字,当我们文字占据了网页的一行的时候,会自动的往下面令一行开始写起,那么这样的文字如流水一般,我们统称为文本流。
如果我们修改css代码如下:
  1. .aaa{width:50px; height:50px; background:#F00;}
  2. .bbb{width:300px; height:150px; background:#0F0;}
复制代码
效果如下;
02.jpg
好,此时如果我们继续把.aaa后面的css代码加一个属性为float:left; 那么此时的css代码如下:
  1. .aaa{width:50px; height:50px; background:#F00; float:left;}
  2. .bbb{width:300px; height:150px; background:#0F0;}
复制代码


效果如下:
06.jpg
大家此时可以看到,这个.aaa的div已经好像是浮动到.bbb的div的上方了,那么我们这个就是float:left; 的效果
好,我们如果继续把.bbb的属性也添加一个float:left; 的属性,我们来看下会有什么样的效果出现呢!
  1. .aaa{width:50px; height:50px; background:#F00; float:left;}
  2. .bbb{width:300px; height:150px; background:#0F0; float:left;}
复制代码
那么此时的效果如下:
11.jpg
大家此时可以看到,我们出现了第二个的.bbb的div现在也是左浮动但是呢,却是和第一个.aaa的div考到一起了,这个大家可以理解为,默认的没有float的为一个层,比如是人间平民,如果加了float那么就到了云霄殿,而这2个都加了float,表示这2个都到了云霄殿,但是呢,到了云霄殿就要遵守云霄殿的规则,也是先来后到,要排队。则会出现这样的效果;
如果我们在15.html当中在加一个div呢,我们来看源代码

  1. <body>
  2. <div class="aaa">111</div>
  3. <div class="bbb">222</div>
  4. <div class="ccc">333</div>

  5. </body>
复制代码

同时呢,我们在到15.css当中定义我们的属性;代码如下:
  1. .aaa{width:50px; height:50px; background:#F00; float:left;}
  2. .bbb{width:300px; height:150px; background:#0F0; float:left;}
  3. .ccc{width:300px; height:150px; background:#FF0; float:left;}
复制代码
那么此时的效果是什么呢?
我们分析下这个代码:
我们加了一个.ccc的div同时呢,我们又让这个.ccc的div也到了云霄殿加了一个float:left; 的属性效果;好我们来看这个效果如下:
056.jpg
如果我们把第二个不加float呢,代码如下
  1. .aaa{width:50px; height:50px; background:#F00; float:left;}
  2. .bbb{width:300px; height:150px; background:#0F0; }
  3. .ccc{width:300px; height:150px; background:#FF0; float:left;}
复制代码


效果如下
QQ截图20141203235118.jpg
那么此时我们看到,第一个加了float,那么它脱离了文本留,但是呢,第二个没有脱离,好那么第二个顶替了第一个的文本流的位置,而第三个也float了,它又挨着第二个,如果此时我们加了另一个div,源代码如下:

  1. <body>
  2. <div class="aaa">111</div>
  3. <div class="bbb">222</div>
  4. <div class="ccc">333</div>
  5. <div class="ddd">444</div>

  6. </body>
复制代码
此时我们在定义.ddd的属性,css代码如下
  1. <blockquote>.aaa{width:50px; height:50px; background:#F00; float:left;}
复制代码


那么此时我们来分析下这段代码
第一个.aaa的div 浮动了,第二个没有浮动,那么第二个顶了一个位置;第三个和第四个都浮动了,但是因为第二个没有浮动所以第三个和第四个只能是仅仅挨着的。那么效果如下;
200.jpg
---------------------------------------------------修改代码如下--------------
  1. .aaa{width:50px; height:50px; background:#F00; float:left;}
  2. .bbb{width:300px; height:150px; background:#0F0;float:left; }
  3. .ccc{width:300px; height:150px; background:#FF0; float:right; }
  4. .ddd{width:300px; height:150px; background:#00F; float:right;}
复制代码

056.jpg

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户,那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信:q792472177免费电话、后台提交工单这些方式联系道勤主机客服! 如果您不是我们的客户也没问题,点击页面最右边的企业QQ在线咨询图标联系我们并购买后,我们为您免费进行无缝搬家服务,让您享受网站零访问延迟的迁移到道勤主机的服务!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

道勤网- 推荐内容!上一条 /2 下一条

!jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回复 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号-1 )

GMT+8, 2024-3-29 19:41

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

快速回复 返回顶部 返回列表