CLEAR在CSS中的应用
在使用DIV + CSS制作网页的时候，经常会用到多个DIV并列排列，往往会使用float:left或float:right来实现，结果使用后问题也就出现了，当左边并列的多个DIV总宽度不足100%时，下边的DIV就很可能排在并列DIV的右边，和上一行的并列的DIV在同一行，这不是我们想要的结果。使用Clear属性就可以解决这个问题，下面引用帮助的介绍：
定义和用法
clear 属性规定元素的哪一侧不允许其他浮动元素。
说明
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
| 默认值： | none |
|---|---|
| 继承性： | no |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.clear="left" |
浏览器支持
所有主流浏览器都支持 clear 属性。
注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
可能的值
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
举例
<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的布局
