第十六课 div css当中 到底该如何清除DIV的左右浮动详解教程
本帖最后由 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;的一种应用效果
页:
[1]