clear=right时的效果：
<img src="myfile/pic/plmm.jpg" width="120" height="117" alt="****" align="left" hspace="12" vspace="8" />
< p>;text,text,text,text,text,text,text,text,text,etc</p>
< br clear=right>
< p>;New heading here</p>
clear=left时的效果：
<img src="myfile/pic/plmm.jpg" width="120" height="117" alt="****" align="left" hspace="12" vspace="8" />
< p>;text,text,text,text,text,text,text,text,text,etc</p>
< br clear=left>
< p>;New heading here</p>
看看没加clear之前的效果：
<style>
.floatholder {
BORDER-RIGHT: #000 4px solid; BORDER-TOP: #000 4px solid; FONT-SIZE: 1.2em; BACKGROUND: #dc8; MARGIN: 10px 0px 0px; BORDER-LEFT: #000 4px solid; BORDER-BOTTOM: #000 4px solid
}
.floatbox {
BORDER-RIGHT: #f55 3px solid; BORDER-TOP: #f55 3px solid; BACKGROUND: #773; FLOAT: left; BORDER-LEFT: #f55 3px solid; WIDTH: 35%; COLOR: #ffd; BORDER-BOTTOM: #f55 3px solid
}
.clearfix {
DISPLAY: inline-block;
}
</style>
<DIV class="floatholder">
<DIV class=floatbox>
<P>This float is not enclosed by the surrounding div container. </P></DIV>
<P>This container lacks the fix.</P></DIV>
看看清除后的效果： <style>
.floatholder {
BORDER-RIGHT: #000 4px solid; BORDER-TOP: #000 4px solid; FONT-SIZE: 1.2em; BACKGROUND: #dc8; MARGIN: 10px 0px 0px; BORDER-LEFT: #000 4px solid; BORDER-BOTTOM: #000 4px solid
}
.floatbox {
BORDER-RIGHT: #f55 3px solid; BORDER-TOP: #f55 3px solid; BACKGROUND: #773; FLOAT: left; BORDER-LEFT: #f55 3px solid; WIDTH: 35%; COLOR: #ffd; BORDER-BOTTOM: #f55 3px solid
}
.clearfix {
DISPLAY: inline-block;
}
</style>
<DIV class="clearfix floatholder">
<DIV class=floatbox>
<P>This float is not enclosed by the surrounding div container. </P></DIV>
<P>This container lacks the fix.</P></DIV>