設計筆記本

資料來源：wowbox blog http://www.wowbox.com.tw/blog/article.asp?id=1050

以前最常用的方法有兩種︰

方法一

使用塊級clear，即聲明一個塊的類屬性為.clear {clear:both;}

這個方法我最常用

方法二

使用內聯元素清理，比如說在主浮動內容後跟一個內聯元素。

.inlineclear {clear:both;}
<span class="inlineclear"></span>

方法三，使用雙層div巢狀

#pubpage {display:block;clear:both;}
#main {display:block;float:left;}
<div id="pubpage">
  <div id="main">
    內容
  </div>
</div>

這樣用的話，內部的main就會把浮動給撐起來

方法四

/******clear float*******/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

加在一個想表示成塊的容器的類屬性上，但此屬性必須為第一個，如

<div class="clearfix votelist" id="votelist">

第四種方法目前可以很好的兼容多種瀏覽器，並且不要加額外的元素就可以完成想要的佈局，原文請看這裡 http://www.positioniseverything.net/easyclearing.html
有了以上這幾種方法，你在用div+css佈局時就不會有那以多的苦惱了。