学步园

      大家在制作网页时，两个DIV之间是不是经常用到margin属性呢。

   margin在中文中我们翻译成外边距或者外补白（本文中引用外边距）。他是元素盒模型（box model）的基础属性。

　　我在制作的过程中，发现了一个问题，两个DIV之间用margin来控制间距的时候，如果你制作的网页是一个比较复杂内容较多的话，把网页放在IE和火狐两个浏览器测试，会发现，有些margin属性在火狐浏览器中会被忽略，也就是说DIV之间的间距消失了，margin属性没有起到作用，也让网页版面变得不规整了。不单是margin属性，padding属性也有不管用的，或是在火狐浏览器中显示的乱七八遭。

　　通常的解决方法，我们会在两个浏览器不断的测试效果下，修改CSS中margin或padding所对应的属性值，即废时又浪费感情。我在一愁莫展之际，突然对clear属性产生了兴趣，于是对它进行了严格的体检，最后很兴奋的发现了它的好处。

　　两个DIV之间不用写什么margin属性，用clear当间距是最好的办法了（我个人认为），这样一来，网页在两个浏览器之间运行的效果都一样，少了很多麻烦，我们只需定义一个clear属性，在DIV之间调用一个class类为clear的“DIV隔断”就行了：

CSS样式表中clear的属性设置：

.clear{ clear: both; font-size:1px; width:1px; visibility: hidden; }

网页中的运用：

<div id=01>第一个DIV</div>
<div class="clear" style="height:1px;"></div>（在这里给应用clear属性的DIV定义一个高度当作上下两个DIV的间距，如果还控制不到可以用大的div的line-height:40%;属性来控制）
<div id=02>第二个DIV</div>

－－－－－－－－－－－－－－－－－－－－－－－－－

在DIV + CSS设计网页中，经常需要设置多个DIV并列排列，往往是使用float:left或float:right来实现，但问题出现了，当前面并列的多个DIV总宽度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，这不是我们想要的结果。使用Clear属性正好可以解决这一问题，下面引用帮助的介绍：

CSS clear属性

Image and text elements that appear in another element are called floating elements. The clear property sets the sides of an element where other floating elements are not allowed.
图片和文字元素出现在另外元素中，那么它们(图片和文字)可称为浮动元素(floating element)。使用clear属性可以让元素边上不出现其它浮动元素。

Note: This property does not always work as expected if it is used along with the "float" property.
注意：当这个属性随着"float"属性一起使用的话，那么结果可能会不尽如人意

Inherited: No
继承性：无

可用值

举例

<style type="text/css">

.LeftText{
   margin: 3px;
   float: left;
   height: 180px;
   width: 170px;
   border: 1px solid #B1D1CE;
   background-color: #F3F3F3;
}

.FootText{
   height: 180px;
}

.Clear
{
   clear:both;
}
</style>

<div class="LeftText">区块1</div>
<div class="LeftText">区块2</div>
<div class="Clear"></div>
<div class="FootText">区块3</div>

代码说明：

如果没有Clear这一层，“区块3”会紧接区块2并列在同一行。
加了Clear这一层后，会把上面的浮动DIV的影响清除，使其不至影响下面DIV的布局