對(duì)css中clear元素的理解

2016/11/7 9:10:26 閱讀：1523 發(fā)布者：1523

　　clear：left;表示左側(cè)不能有浮動(dòng)元素。

　　clear：right;表示右側(cè)不能有浮動(dòng)元素。
clear：both;表示左右兩側(cè)都不能有浮動(dòng)元素。

　　但在使用時(shí)，還得考慮css優(yōu)先級(jí)問題。相同類型選擇器制定的樣式，在樣式表文件中，
越靠后的優(yōu)先級(jí)越高。

　　當(dāng)所有元素的clear屬性都設(shè)為right時(shí)，由于優(yōu)先級(jí)的原因，
并不是所想的那樣：右側(cè)沒有浮動(dòng)元素，而是右側(cè)出現(xiàn)了浮動(dòng)元素。

　　比如下面的代碼：

<html> 
<head> 
<style type="text/css"> 

.div1 
{ 
height:40px; 
width:40px; 
background-color:red; 
position:releative; 
float:left; 
clear:right; 
} 
.div2 
{ 
height:40px; 
width:40px; 
background-color:green; 
position:relative; 
float:left; 
clear:right; 
} 
.div3 
{ 
height:40px; 
width:40px; 
background-color:yellow; 
position:relative; 
float:left; 
clear:right; 
} 
.div4 
{ 
height:40px; 
width:40px; 
background-color:black; 
position:relative; 
float:left; 
clear:right; 
} 
.div5 
{ 
height:40px; 
width:40px; 
background-color:blue; 
position:relative; 
float:left; 
clear:right; 
} 
</style> 
</head> 

<body> 
<div class="div1"> 
</div> 
<div class="div2"> 
</div> 
<div class="div3"> 
</div> 
<div class="div4"> 
</div> 
<div class="div5"> 
</div> 
</body> 

</html>

clear-right

　　其中：class優(yōu)先級(jí)關(guān)系： div5>div4>div3>div2>div1

　　所以，呈現(xiàn)出下圖情況：

　　當(dāng)所有元素的clear屬性都設(shè)為left時(shí)，由于優(yōu)先級(jí)的原因，
并不是所想的那樣：右側(cè)可以有浮動(dòng)元素，而是右側(cè)不能出現(xiàn)浮動(dòng)元素。

　　比如下面的代碼：

<html> 
<head> 
<style type="text/css"> 

.div1 
{ 
height:40px; 
width:40px; 
background-color:red; 
position:releative; 
float:left; 
clear:left; 
} 
.div2 
{ 
height:40px; 
width:40px; 
background-color:green; 
position:relative; 
float:left; 
clear:left; 
} 
.div3 
{ 
height:40px; 
width:40px; 
background-color:yellow; 
position:relative; 
float:left; 
clear:left; 
} 
.div4 
{ 
height:40px; 
width:40px; 
background-color:black; 
position:relative; 
float:left; 
clear:left; 
} 
.div5 
{ 
height:40px; 
width:40px; 
background-color:blue; 
position:relative; 
float:left; 
clear:left; 
} 
</style> 
</head> 

<body> 
<div class="div1"> 
</div> 
<div class="div2"> 
</div> 
<div class="div3"> 
</div> 
<div class="div4"> 
</div> 
<div class="div5"> 
</div> 
</body> 

</html>