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)致兩個(gè)子div(#son1, #son2)不占文檔流，所以雖然兩個(gè)子div的高為200px，但是父div#parentdiv的高度是0px。

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

html片段二：在html片段一的基礎(chǔ)上添加css class：clear，給父div添加個(gè)子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）下外邊框的下面，因?yàn)樽觗iv#son3要占文檔流，所以父div不得不增加高度來容納子div#son3，這樣也就達(dá)到了預(yù)期效果。