Ok， 下面舉例說明下clear屬性到底給float（clear常常和float結(jié)合使用）帶來哪些影響：

HTML片段一：

代碼如下:

#parentDiv

{

background: #00ff00;

}

.ret

{

width: 100px;

height: 200px;

background: #0000ff;

}

.fl

{

float: left;

}

.fr

{

float: right;

}

<div id="parentDiv">

<div id=“son1” class="fl ret">

<h2>Left</h2>

</div>

<div id=”son2" class="fr ret" >

<h2>Right</h2>

</div>

</div>

效果：由于float導(dǎo)致兩個子DIV(#son1, #son2)不占文檔流，所以雖然兩個子DIV的高為200PX，但是父DIV#parentDiv的高度是0PX。

問題：有時候我們需要父DIV的高度正好容納下所有的子DIV。在這種情況下我們可以使用clear屬性了。

HTML片段二：在HTML片段一的基礎(chǔ)上添加CSS class：clear，給父DIV添加個子DIV（#son3）

代碼如下:

#parentDiv

{

background: #00ff00;

}

.ret

{

width: 100px;

height: 200px;

background: #0000ff;

}

.fl

{

float: left;

}

.fr

{

float: right;

}

.clear

{

clear: both;

}

<div id="parentDiv">

<div id=“son1” class="fl ret">

<h2>Left</h2>

</div>

<div id=”son2" class="fr ret" >

<h2>Right</h2>

</div>

<div id="son3" class=“clear”>

</div>

</div>

效果：這種情況下父DIV的高度是200PX（和子DIV中最高的高度一樣）。

分析：

子DIV（#son3）使用了clear屬性，這樣其上外邊框在float元素（#son1，#son2）下外邊框的下面，因為子DIV#son3要占文檔流，所以父DIV不得不增加高度來容納子DIV#son3，這樣也就達(dá)到了預(yù)期效果。

更多信息請查看IT技術(shù)專欄