clear屬性在CSS中的妙用

作者：admin 2010-09-08 15:16:46

這里和大家分享一下clear屬性在CSS中的妙用，圖片和文字元素出現(xiàn)在另外元素中，那么它們(圖片和文字)可稱為浮動(dòng)元素(floatingelement)。使用clear屬性可以讓元素邊上不出現(xiàn)其它浮動(dòng)元素。

你對(duì)clear屬性在CSS中的使用是否了解，這里向大家描述一下，在DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)中設(shè)置多個(gè)DIV并列排列，往往是使用float:left或float:right來(lái)實(shí)現(xiàn)，但問(wèn)題出現(xiàn)了，當(dāng)前面并列的多個(gè)DIV總寬度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，使用Clear屬性正好可以解決這一問(wèn)題，下面引用幫助的介紹。

clear在CSS中的妙用

在DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)中，經(jīng)常需要設(shè)置多個(gè)DIV并列排列，往往是使用float:left或float:right來(lái)實(shí)現(xiàn)，但問(wèn)題出現(xiàn)了，當(dāng)前面并列的多個(gè)DIV總寬度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，這不是我們想要的結(jié)果。使用Clear屬性正好可以解決這一問(wèn)題，下面引用幫助的介紹：

CSS clear屬性

圖片和文字元素出現(xiàn)在另外元素中，那么它們(圖片和文字)可稱為浮動(dòng)元素(floatingelement)。使用clear屬性可以讓元素邊上不出現(xiàn)其它浮動(dòng)元素。

注意：當(dāng)這個(gè)屬性隨著"float"屬性一起使用的話，那么結(jié)果可能會(huì)不盡如人意

Inherited:No

繼承性：無(wú)

可用值

CSS中clear屬性可用值

示例代碼：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=utf-8"/> 
<title>無(wú)標(biāo)題文檔</title> 
<styletypestyletype="text/css"> 
.LeftText{  
margin:3px;  
float:left;  
height:180px;  
width:170px;  
border:1pxsolid#B1D1CE;  
background-color:#F3F3F3;  
}  
 
.FootText{  
height:180px;  
}  
 
.Clear  
{  
clear:both;  
}  
</style> 
</head> 
 
<body> 
<divclassdivclass="LeftText">區(qū)塊1</div> 
<divclassdivclass="LeftText">區(qū)塊2</div> 
<divclassdivclass="Clear"></div> 
<divclassdivclass="FootText">區(qū)塊3</div> 
</body> 
</html>

代碼說(shuō)明：

如果沒(méi)有Clear這一層，“區(qū)塊3”會(huì)緊接區(qū)塊2并列在同一行。加了Clear這一層后，會(huì)把上面的浮動(dòng)DIV的影響清除，使其不至影響下面DIV的布局

【編輯推薦】

CSS繼承性及其應(yīng)用
CSS十個(gè)經(jīng)典使用技巧
CSS中l(wèi)ink和@import的區(qū)別
CSS2.0中page-break-after屬性用法
技術(shù)分享使用不同CSS樣式兼容多種瀏覽器

責(zé)任編輯：佚名來(lái)源： css3-html5.com

clear CSS