長島冰茶的工程師筆記

以前在使用 float 做排版的時候，常要在最後一個 div 元素後再加上一個 div 做 clear:both
但是這種做法有點麻煩，而且一但忘記加的話，版面就亂了

但最近聽同事說，jquery 有 clearfix 的寫法，可以直接在容器上套用 class=clearfix
就會自動在最開始和結尾做好 clear 的動作
我研究了一下，clearfix 必須像以下這樣寫，少一個屬性都不行

.clearfix:before { content: ""; display: table; }
.clearfix:after  { content: ""; display: table; clear: both; }

範例：

<style>
.clearfix:before { content: ""; display: table; }
.clearfix:after  { content: ""; display: table; clear: both; }
.navi .navi_item {float:left; margin:3px; padding:3px;}
</style>
<div class="navi clearfix">
    <div class="navi_item"><a href="/blog/">部落格</a></div>
    <div class="navi_item"><a href="/asset/">記帳本</a></div>
    <div class="navi_item"><a href="/tools/">個人工具</a></div>
    <div class="navi_item"><a href="/acm/">ACM解題</a></div>
    <div class="navi_item"><a href="/works/">作品</a></div>
</div>