仓酷云

标题: 来谈谈：经由过程CSS实例完成扫除浮动 [打印本页]

作者: 精灵巫婆 时间: 2015-1-15 23:56
标题: 来谈谈：经由过程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）。

测试一下，公然半途而废。

属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。

作者: 愤怒的大鸟 时间: 2015-1-17 23:50
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 第二个灵魂 时间: 2015-1-24 15:11
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 飘飘悠悠 时间: 2015-2-1 19:14
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 爱飞 时间: 2015-2-7 16:04
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 再现理想 时间: 2015-2-22 20:16
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 仓酷云 时间: 2015-3-7 04:04
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 若相依 时间: 2015-3-14 12:45
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 蒙在股里 时间: 2015-3-21 09:25
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

欢迎光临仓酷云 (http://ckuyun.com/)