.clearfix 的前世今生

咳~咳~

繼上回的 [ float 的新朋友 clearfix 與 clear 的三腳關係 ] 後

再讓我們來看看故事是怎樣發展下去的

傳說中 .clearfix 也不是一開始就長得這樣的
他的人生有起有伏 跌跌撞撞
而這是他目前的模樣  ( 來自於 bootstrap http://twitter.github.com/bootstrap/ )

<style> 
   .clearfix:before,
   .clearfix:after {
      display:table;
      line-height:0;
      content:"";
   }
   .clearfix:after {
      clear:both;
   }
   .clearfix {
      *zoom: 1;
   }
</style>

.clearfix 裡面有 pseudo class 的 after 相信有認真看上一篇的同學不會有問題

但為什麼要有 before 呢

float 的新朋友 clearfix 與 clear 的三腳關係

要理解 clear 與 clearfix 的恩怨情仇
就不得不先提 float 的故事

在 CSS 發展尚未完備時
能排版的標籤選擇不多
在過去為了讓區塊能做到水平擺放
首選就是利用 (表格 Table) 標籤來達成
W3C Table：http://www.w3schools.com/html/html_tables.asp

不過一旦使用表格
就表示區塊會被固定位置
在需要彈性的情況下  (ex:左右區塊互換時)
就變得沒這麼方便

讓我們來看看這個範例

其中在 .box 內的 .item 區塊都是靠左擺放 
(示意圖怕太亂不想畫太多 .item, 大家請自行補完)

而以下是 HTML 的和 CSS

<div class='box'>
  <div class='item'>item1</div>
  <div class='item'>item2</div>
</div>

<style>
   .box  { ... }
   .item {float:left}
</style>