clear屬性
◆另一個要說明的就是clear:both，表示清除左、右所有的浮動，在接下來的布局中我們還會用這個屬性：clear:left/right。在這裡添加clear:both是由於之前的ul、li元素設置了浮動，如果不清除則會影響banner層位置的設定。
- <dividdivid="pagebody">
- <dividdivid="sidebar">
- div>
- <dividdivid="mainbody">
- div>
- div>
以上是頁面主體部分，我們在css.CSS中添加以下樣式：
- #pagebody{
- width:730px;/*設定寬度*/
- margin:8pxauto;/*居中*/
- }
- #sidebar{
- width:160px;/*設定寬度*/
- text-align:left;/*文字左對齊*/
- float:left;/*浮動居左*/
- clear:left;/*不允許左側存在浮動*/
- overflow:hidden;/*超出寬度部分隱藏*/
- }
- #mainbody{
- width:570px;
- text-align:left;
- float:right;/*浮動居右*/
- clear:right;/*不允許右側存在浮動*/
- overflow:hidden
- }
為了可以查看到效果，建議在#sidebar和#mainbody中加入以下代碼，預覽完成後可以刪除這段代碼：
- border:1pxsolid#E00;
- height:200px
保存預覽效果，可以發現這兩個層完美的浮動，在達到了我們布局的要求，而兩個層的實際寬度應該160+2(border)+570+2=734px，已經超出了父層的寬度，由於clear的原因，這兩個層才不會出現錯位的情況，這樣可以使我們布局的頁面不會因為內容太長（例如圖片）而導致錯位。
而之後添加的overflow:hidden則可以使內容太長（例如圖片）的部份自動被隱藏。通常我們會看到一些網頁在載入時，由於圖片太大，導致布局被撐開，直到頁面下載完成才恢復正常，通過添加overflow:hidden就可以解決這個問題。
CSS中每一個屬性運用得當，就可以解決許多問題，或許它們與你在布局的頁並沒有太大的關系，但是你必須知道這些屬性的作用，在遇到難題的時候，可以嘗試使用這些屬性去解決問題。