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>