你對(duì)Div+CSS布局中border和clear屬性兩個(gè)屬性的用法是否熟悉，這里和大家簡(jiǎn)單分享一下，通過(guò)border很容易就繪制出一條實(shí)線，并且減少了圖片下載所占用的網(wǎng)絡(luò)資源，使得頁(yè)面載入速度變得更快，而clear:both，表示清除左、右所有的浮動(dòng)，在接下來(lái)的布局中我們還會(huì)用這個(gè)屬性：clear:left/right。

Div+CSS布局入門教程之border和clear屬性
 
這一節(jié)里面，主要就是想告訴大家如何使用好border和clear這兩個(gè)屬性。

◆首先，如果你曾用過(guò)table制作網(wǎng)頁(yè)，你就應(yīng)該知道，如果要在表格中繪制一條虛線該如何做，那需要制作一個(gè)很小的圖片來(lái)填充，其實(shí)我們還有更簡(jiǎn)單的辦法，只要在<td></td>中加入這么一段就可以了，你可以試試：

<divstyledivstyle="border-bottom:1pxdashed#ccc"></div> 

大家可以再次參考手冊(cè)，然后你就能明白dashed、solid、dotted...等的作用，利用它們你可以制作出許多效果來(lái)，實(shí)線、虛線、雙線、陰影線等等。

<dividdivid="banner"></div> 

以上代碼便可以實(shí)現(xiàn)設(shè)計(jì)草圖中的banner，在css.css中加入以下樣式：

#banner{  
background:url(banner.jpg)030pxno-repeat;/*加入背景圖片*/  
width:730px;/*設(shè)定層的寬度*/  
margin:auto;/*層居中*/  
height:240px;/*設(shè)定高度*/  
border-bottom:5pxsolid#EFEFEF;/*畫一條淺灰色實(shí)線*/  
clear:both/*清除浮動(dòng)*/  
}  
 

通過(guò)border很容易就繪制出一條實(shí)線了，并且減少了圖片下載所占用的網(wǎng)絡(luò)資源，使得頁(yè)面載入速度變得更快。

◆另一個(gè)要說(shuō)明的就是clear:both，表示清除左、右所有的浮動(dòng)，在接下來(lái)的布局中我們還會(huì)用這個(gè)屬性：clear:left/right。在這里添加clear:both是由于之前的ul、li元素設(shè)置了浮動(dòng)，如果不清除則會(huì)影響banner層位置的設(shè)定。

<dividdivid="pagebody"><!--頁(yè)面主體--> 
<dividdivid="sidebar"><!--側(cè)邊欄--> 
</div> 
<dividdivid="mainbody"><!--主體內(nèi)容--> 
</div> 
</div> 

以上是頁(yè)面主體部分，我們?cè)赾ss.css中添加以下樣式：

#pagebody{  
width:730px;/*設(shè)定寬度*/  
margin:8pxauto;/*居中*/  
}  
#sidebar{  
width:160px;/*設(shè)定寬度*/  
text-align:left;/*文字左對(duì)齊*/  
float:left;/*浮動(dòng)居左*/  
clear:left;/*不允許左側(cè)存在浮動(dòng)*/  
overflow:hidden;/*超出寬度部分隱藏*/  
}  
#mainbody{  
width:570px;  
text-align:left;  
float:right;/*浮動(dòng)居右*/  
clear:right;/*不允許右側(cè)存在浮動(dòng)*/  
overflow:hidden  
}  
 

為了可以查看到效果，建議在#sidebar和#mainbody中加入以下代碼，預(yù)覽完成后可以刪除這段代碼：

border:1pxsolid#E00;  
height:200px 

保存預(yù)覽效果，可以發(fā)現(xiàn)這兩個(gè)層完美的浮動(dòng)，在達(dá)到了我們布局的要求，而兩個(gè)層的實(shí)際寬度應(yīng)該160+2(border)+570+2=734px，已經(jīng)超出了父層的寬度，由于clear的原因，這兩個(gè)層才不會(huì)出現(xiàn)錯(cuò)位的情況，這樣可以使我們布局的頁(yè)面不會(huì)因?yàn)閮?nèi)容太長(zhǎng)（例如圖片）而導(dǎo)致錯(cuò)位。

而之后添加的overflow:hidden則可以使內(nèi)容太長(zhǎng)（例如圖片）的部份自動(dòng)被隱藏。通常我們會(huì)看到一些網(wǎng)頁(yè)在載入時(shí)，由于圖片太大，導(dǎo)致布局被撐開，直到頁(yè)面下載完成才恢復(fù)正常，通過(guò)添加overflow:hidden就可以解決這個(gè)問(wèn)題。

CSS中每一個(gè)屬性運(yùn)用得當(dāng)，就可以解決許多問(wèn)題，或許它們與你在布局的頁(yè)并沒(méi)有太大的關(guān)系，但是你必須知道這些屬性的作用，在遇到難題的時(shí)候，可以嘗試使用這些屬性去解決問(wèn)題。

【編輯推薦】

1. 新手上路 如何學(xué)習(xí)DIV+CSS制作網(wǎng)頁(yè)
2. Div+CSS布局入門教程之頁(yè)面布局和規(guī)劃
3. 深入學(xué)習(xí)DIV+CSS之絕對(duì)定位和相對(duì)定位用法
4. Div+CSS布局入門之寫入整體層結(jié)構(gòu)與CSS
5. DIV+CSS開發(fā)過(guò)程中影響SEO的制作細(xì)節(jié)