ok， 下面舉例說(shuō)明下clear屬性到底給float（clear常常和float結(jié)合使用）帶來(lái)哪些影響：
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。
問(wèn)題：有時(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不得不增加高度來(lái)容納子div#son3，這樣也就達(dá)到了預(yù)期效果。