在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?
????繼承性：無

????可用值

值描述

left	No floating elements allowed on the left side 不允許元素左邊有浮動的元素
right	No floating elements allowed on the right side 不允許元素的右邊有浮動的元素
both	No floating elements allowed on either the left or the right side 元素的兩邊都不允許有浮動的元素
none	Allows floating elements on both sides 允許元素兩邊都有浮動的元素

?

????舉例

<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的布局

轉載于:https://www.cnblogs.com/scgw/archive/2007/08/24/868936.html

總結

以上是生活随笔為你收集整理的clear在CSS中的妙用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。