DIV教程之“clear:both;”扫除浮动的使用

你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
在CSS中我们会常常要用到“扫除浮动”Clear，对照典范的就是clear:both;
CSS手册上是如许申明的：该属性的值指出了不同意有浮动工具的边。这个属性是用来把持float属性在文档流的物理地位的。
当属性设置float（浮动）时，其地点的物理地位已离开文档流了，可是年夜多时分我们但愿文档流能辨认float（浮动），大概是但愿float（浮动）前面的元素不被float（浮动）所影响，这个时分我们就必要用clear:both;来扫除。好比：
<pstyle="float:left;width:200px;">这个是第1列，</p>
<pstyle="float:left;width:400px;">这个是第2列，</p>
<p>这个是第3列。</p>

假如不必扫除浮动，那末第3列笔墨就会和第1、2列笔墨在一同，以是我们在第3个这列加一个扫除浮动clear:both;
<pstyle="float:left;width:200px;">这个是第1列，</p>
<pstyle="float:left;width:400px;">这个是第2列，</p>
<pstyle="clear:both;">这个是第3列。</p>

一般，我们常常会将“扫除浮动”独自界说一个CSS款式，如:


.clear{
clear:both;
}


然后利用<divclass="clear"></div>来专门举行“扫除浮动”。
不外也有不赞成定见是，<divclass="clear"></div>能够不写，间接鄙人层扫除就能够了。
好比原本好好的


<pstyle="float:left;width:200px;">这个是第1列，</p>
<pstyle="float:left;width:400px;">这个是第2列，</p>
<pstyle="clear:both;">这个是第3列。</p>


非要整成


<pstyle="float:left;width:200px;">这个是第1列，</p>
<pstyle="float:left;width:400px;">这个是第2列，</p>
<divclass="clear"></div>
<p>这个是第3列。</p>


这点看来，<divclass="clear"></div>的确不必要写。
不外很明显，我们在网页计划时另有一种很广泛的情形：
<styletype="text/css">
#main{background-color:#3399CC;width:600px;padding:20px;}
#sidebar{background-color:#FF6600;float:left;width:130px;}
#container{float:right;width:420px;background-color:#FFFF33;}
</style>
<divid="main">
<divid="sidebar">第一段内容第一段内容第一段内容</div>
<divid="container">第二段内容第二段内容第二段内容</div>
</div>
<pstyle="clear:both;">第三段内容</p>

该页面测试在IE下效果正合所要：蓝色块外部有白色和黄色两个色块内容，同时在蓝色块以下是第三段文本。
不外FF的效果可不是如许的。我们不克不及单单想鄙人一层扫除就可以完成我们的事情，我们必需在浮动元素地点标签闭合之前实时举行“扫除”。
<styletype="text/css">
#main{background-color:#3399CC;width:600px;padding:20px;}
#sidebar{background-color:#FF6600;float:left;width:130px;}
#container{float:right;width:420px;background-color:#FFFF33;}
.clear{clear:both;}
</style>
<divid="main">
<divid="sidebar">第一段内容第一段内容第一段内容</div>
<divid="container">第二段内容第二段内容第二段内容</div>
<divclass="clear"></div>
</div>
<p>第三段内容</p>

关于因多加的<divclass="clear"></div>标签会引发IE和FF高度变更，经由过程以下办法办理：

.clear{
clear:both;
height:1px;
margin-top:-1px;
overflow:hidden;
}

<styletype="text/css">
#main{background-color:#3399CC;width:600px;padding:20px;}
#sidebar{background-color:#FF6600;float:left;width:130px;}
#container{float:right;width:420px;background-color:#FFFF33;}
.clear{clear:both;height:1px;margin-top:-1px;overflow:hidden;}
</style>
<divid="main">
<divid="sidebar">第一段内容第一段内容第一段内容</div>
<divid="container">第二段内容第二段内容第二段内容</div>
<divclass="clear"></div>
</div>
<p>第三段内容</p>
</p>
可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet)的家喻户晓。

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

滚动条)层属性--溢出(visible/hidden/scroll/auto)

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

仓酷云

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

滚动条)层属性--溢出(visible/hidden/scroll/auto)

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。