3天0基础建站课程

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

226 主题	12 回帖	3260 积分

终身VIP会员

Rank: 7 Rank: 7 Rank: 7

积分: 3260

发消息

发表于 2014-12-4 15:06:09 | 显示全部楼层 |阅读模式

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

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

x

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

上一节课程，我们学习了float的具体知识，那么我们现在来看这个浮动的div如何清楚，新建一个16.html文件和16.css的文件。并且我们把这个16.css的文件引入我们的16.html的代码当中，那么16.html的代码如下：

<font size="3"><body>
<div class="aaa">111</div>
<div class="bbb">222</div>
<div class="ccc">333</div>
</body></font>

复制代码

css代码如下：

<font size="3">.aaa{width:350px; height:150px; background:#F00; float:left; }
.bbb{width:400px; height:150px; background:#0F0;float:left; }
.ccc{width:50px; height:300px; background:#00C;}</font>

复制代码

效果如下：

我们来分析一下，这个第一个.aaa和第二个.bbb的都设置了左面浮动，都到了云霄殿，但是还是要拍着队，所以.bbb仍然在.aaa的后面！
之后呢，我们继续来看；.ccc因为没有浮动所以顶了上去，但是呢，它的高度很高，被第一个.aaa的div遮挡了一部分，那么这个就是float的应用，
那么这样呢，如果我们被遮挡住的部分我们是有内容的，想要把这个内容展示给大众看，被.aaa的div给遮挡住了，这样是不是好悲催啊！---想想我们现在该怎么办？思考一分钟------
好，那么我们在这个第三个.ccc的div当中我们设置一个清除浮动-（清除浮动的意识就是让上面的浮动效果对我没有作用）
那么我在这个.ccc添加一个清除浮动的代码如下；

clear:left;

复制代码

具体代码如下：

.aaa{width:350px; height:150px; background:#F00; float:left; }
.bbb{width:400px; height:150px; background:#0F0;float:left; }
.ccc{width:50px; height:300px; background:#00C; clear:left;}

复制代码

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

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

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

使用道具举报