来谈谈：经由过程CSS实例完成扫除浮动
CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。网页制造poluoluo文章简介：在写HTML代码的时分，发明在Firefox等切合W3C尺度的扫瞄器中，假如有一个DIV作为内部容器，外部的DIV假如设置了float款式，则内部的容器DIV由于外部没有clear，招致不克不及被撑开。
在写HTML代码的时分，发明在Firefox等切合W3C尺度的扫瞄器中，假如有一个DIV作为内部容器，外部的DIV假如设置了float款式，则内部的容器DIV由于外部没有clear，招致不克不及被撑开。看上面的例子：
HTML4STRICT代码：
[*]<divstyle="width:200px;border:1pxsolidred;">
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]</div>
显现的了局以下：
容器DIV没有被撑开
人人能够看到，作为内部容器的边框为白色的DIV，没有被撑开。这是由于外部的DIV由于float:left以后，就丧失了clear:both和display:block的款式，以是内部的DIV不会被撑开。
我们想让内部容器的DIV跟着外部DIV增加而增添高度，要怎样办理呢？
之前我都是用如许的办法来办理：
HTML4STRICT代码：
[*]<divstyle="width:200px;border:1pxsolidred;">
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]<divstyle="clear:both;"></div>
[*]</div>
显现的了局以下：
显现一般了
我们看到，在容器DIV内要显现出来的float:left的一切的DIV以后，我们增加了如许的一个DIV：<divstyle="clear:both"></div>。如许，实在就在最初增添了clear的举措。
可是，我总以为，这么多加一个DIV有点不当。一是多了一个没成心义的DIV，二是在用dojo做Drag&Drop的时分，因为这个DIV是容器DIV的一个字节点，假如这个节点被挪动，则会形成排版上的Bug：假如要显现的蓝框的DIV被移到这个DIV以后，则由于clear:both，它会被强迫换一行显现。以是，我一向在寻觅更好的办理举措。
今天在有数次的扣问了Google年夜仙后，我终究找到了HowToClearFloatsWithoutStructuralMarkup这篇文章，找到懂得决的举措。
起首设置如许的CSS：
CSS代码：
[*].clearfix:after{
[*]content:".";
[*]display:block;
[*]height:0;
[*]clear:both;
[*]visibility:hidden;
[*]}
然后，我们再修正本来的HTML代码，让内部的容器DIV来利用这个CSS：
HTML4STRICT代码：
[*]<divstyle="width:200px;border:1pxsolidred;"class="clearfix">
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TESTDIV</div>
[*]</div>
在Firefox里测试一下，哈哈，如许做切实其实很无效，显现一般，并且dojo的Drag&Drop也不会有成绩了。本来，这个clearfix的CSS利用了after这个伪工具，它将在使用clearfix的元素的开头增加content中的内容。在这里增加了一个句号"."，而且把它的display设置成block；高度设为0；clear设为both；visibility设为埋没。如许就到达了撑开容器的目标啦。
可是，在文章中说，WindowsIE其实不撑持如许做。以是要让IE也完善显现，则必需在clearfix这个CSS界说的前面加上一些专门为IE设定的HACK。CSS以下：
CSS代码：
[*].clearfix:after{
[*]content:".";
[*]display:block;
[*]height:0;
[*]clear:both;
[*]visibility:hidden;
[*]}
[*]/*HidesfromIE-mac*/
[*]*html.clearfix{height:1%;}
[*]/*EndhidefromIE-mac*/
由于本义字符""，MacIE扫瞄器会疏忽失落这段Hack，但WindowsIE不会，它会使用*html.clearfix{height:1%;}来到达撑开DIV容器的目标（貌似MacIE没有举措办理这个成绩，不外幸亏用户数目是在是太少了，Safari撑持就能够了:p）。
测试一下，公然半途而废。
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
页:
[1]