在DIV + CSS設(shè)計(jì)網(wǎng)頁(yè)中，經(jīng)常需要設(shè)置多個(gè)DIV并列排列，往往是使用float:left或float:right來(lái)實(shí)現(xiàn)，但問(wèn)題出現(xiàn)了，當(dāng)前面并列的多個(gè) DIV總寬度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，這不是我們想要的結(jié)果。使用Clear屬性正好可以解決這一 問(wèn)題，下面引用幫助的介紹：
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.
圖片和文字元素出現(xiàn)在另外元素中，那么它們(圖片和文字)可稱為浮動(dòng)元素(floating element)。使用clear屬性可以讓元素邊上不出現(xiàn)其它浮動(dòng)元素。
Note: This property does not always work as expected if it is used along with the "float" property.
注意：當(dāng)這個(gè)屬性隨著"float"屬性一起使用的話，那么結(jié)果可能會(huì)不盡如人意
Inherited: No
繼承性：無(wú)
可用值
| 值 | 描述 |
| left | No floating elements allowed on the left side
不允許元素左邊有浮動(dòng)的元素 |
| right | No floating elements allowed on the right side
不允許元素的右邊有浮動(dòng)的元素 |
| both | No floating elements allowed on either the left or the right side
元素的兩邊都不允許有浮動(dòng)的元素 |
| none | Allows floating elements on both sides
允許元素兩邊都有浮動(dòng)的元素 |
舉例
<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">區(qū)塊1</div>
<div class="LeftText">區(qū)塊2</div>
<div class="Clear"></div>
<div class="FootText">區(qū)塊3</div>
代碼說(shuō)明：
如果沒(méi)有Clear這一層，“區(qū)塊3”會(huì)緊接區(qū)塊2并列在同一行。
加了Clear這一層后，會(huì)把上面的浮動(dòng)DIV的影響清除，使其不至影響下面DIV的布局
