Div+CSS布局入門教程(四) -- 用好border和clear

四、頁面製作(1)----用好border和clear
　　由於找工作找房子的原因，隔了這麼久才能開始寫教程，心裡感覺很對不起一直在關注本站的朋友，今天是找到房子的第二天，於是趕快繼續寫教程。
　　這一節裡面，主要就是想告訴大家如何使用好border和clear這兩個屬性。
　　首先，如果你曾用過table製作網頁，你就應該知道，如果要在表格中繪製一條虛線該如何做，那需要製作一個很小的圖片來填充，其實我們還有更簡單的辦法，只要在<td></td>中加入這麼一段就可以了，你可以試試：
　　<div style="border-bottom:1px dashed #ccc"></div>
　　大家可以再次參考手冊，然後你就能明白dashed、solid、dotted...等的作用，利用它們你可以製作出許多效果來，實線、虛線、雙線、陰影線等等。
<div id="banner"></div>
　　以上代碼便可以實現設計草圖中的banner，在css.css中加入以下樣式：
#banner {
background:url(banner.jpg) 0 30px no-repeat; /*加入背景圖片*/
width:730px; /*設定層的寬度*/
margin:auto; /*層置中*/
height:240px; /*設定高度*/
border-bottom:5px solid #EFEFEF; /*畫一條淺灰色實線*/
clear:both /*清除浮動*/
}
　　通過border很容易就繪製出一條實線了，並且減少了圖片下載所佔用的網路資源，使得頁面載入速度變得更快。
　　另一個要說明的就是clear:both，表示清除左、右所有的浮動，在接下來的布局中我們還會用這個屬性：clear:left/right。在這裡添加clear:both是由於之前的ul、li元素設定了浮動，如果不清除則會影響banner層位置的設定。
<div id="pagebody"><!--頁面主體-->
<div id="sidebar"><!--側邊欄-->
</div>
<div id="mainbody"><!--主體內容-->
</div>
</div>
　　以上是頁面主體部分，我們在css.css中添加以下樣式：
#pagebody {
width:730px; /*設定寬度*/
margin:8px auto; /*置中*/
}
#sidebar {
width:160px; /*設定寬度*/
text-align:left; /*文字靠左對齊*/
float:left; /*浮動居左*/
clear:left; /*不允許左側存在浮動*/
overflow:hidden; /*超出寬度部分隱藏*/
}