立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 1971|回复: 0

[DIV+CSS 教程笔记02] 第十六课 div css当中 到底该如何清除DIV的左右浮动详解教程

[复制链接]

212

主题

223

帖子

2986

积分

终身VIP会员

Rank: 7Rank: 7Rank: 7

积分
2986

推广达人宣传达人突出贡献荣誉管理论坛元老

发表于 2014-12-4 15:06:09 | 显示全部楼层 |阅读模式
道勤网-数据www.daoqin.net

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

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

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

上一节课程,我们学习了float的具体知识,那么我们现在来看这个浮动的div如何清楚,新建一个16.html文件和16.css的文件。并且我们把这个16.css的文件引入我们的16.html的代码当中,那么16.html的代码如下:
  1. <font size="3"><body>
  2. <div class="aaa">111</div>
  3. <div class="bbb">222</div>
  4. <div class="ccc">333</div>


  5. </body></font>
复制代码


css代码如下:

  1. <font size="3">.aaa{width:350px; height:150px; background:#F00; float:left; }
  2. .bbb{width:400px; height:150px; background:#0F0;float:left; }
  3. .ccc{width:50px; height:300px; background:#00C;}</font>
复制代码
效果如下:
09.jpg
我们来分析一下,这个第一个.aaa和第二个.bbb的都设置了左面浮动,都到了云霄殿,但是还是要拍着队,所以.bbb仍然在.aaa的后面!
之后呢,我们继续来看;.ccc因为没有浮动所以顶了上去,但是呢,它的高度很高,被第一个.aaa的div遮挡了一部分,那么这个就是float的应用,
那么这样呢,如果我们被遮挡住的部分我们是有内容的,想要把这个内容展示给大众看,被.aaa的div给遮挡住了,这样是不是好悲催啊!---想想我们现在该怎么办?思考一分钟------
好,那么我们在这个第三个.ccc的div当中我们设置一个清除浮动-(清除浮动的意识就是让上面的浮动效果对我没有作用
那么我在这个.ccc添加一个清除浮动的代码如下;
  1. clear:left;
复制代码
具体代码如下:
  1. .aaa{width:350px; height:150px; background:#F00; float:left; }
  2. .bbb{width:400px; height:150px; background:#0F0;float:left; }
  3. .ccc{width:50px; height:300px; background:#00C; clear:left;}
复制代码


这个就表示清楚左侧的浮动,让左侧浮动的效果对.ccc 的div没有作用!那么这样呢,我们此时的.ccc的div的全部效果就会显示出来,我们来看下这个效果
20.jpg

那么这个就是呢关于这个clear:right; clear:left; clear:both;的一种应用效果



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


加入道勤网VIP-www.daoqin.net-享受建站指导服务!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

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


 
 
技术支持
在线客服
点击这里给我发消息
点击这里给我发消息
道勤建站群:
3群建站-美工交流-道勤
道勤美工群:
3群建站-美工交流-道勤
工作时间:
8:00-18:00
客服热线:
15056962695
官方微信扫一扫
!jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回复 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

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

GMT+8, 2020-10-31 14:46

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

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