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>

但這並沒有想像中這麼單純
float 其實會讓 .item 影響到他的容器 .box 的實際大小
使得 .box 高度計算方式不隨內容增加而改變
實際上的結果會是這樣子

如果這時候 .box 有設圖片背景的話
就會因高度不夠而無法顯示  這樣不就糗大了嗎 ><
此時就必須請出 float 的好朋友 (清除浮動 clear)
因此我們將程式改寫一下

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

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

因為加了清除浮動緣故
.box 下方就像是有堵牆壁一樣撐住整個容器
從此 float 與 clear 就過著幸福快樂的日子
這真是可喜可賀啊 ^^!!

不過李組長眉頭一皺   發現案情沒這麼單純
現今的網頁非常注重互動
利用 AJAX 把新項目加入到容器也是很常見的應用

但因為 .clear 是一個實際存在 DOM 物件
因此利用 javascript 加入的新物件便無法保持與其他 .item 相同的位置



就像下圖一樣
在做 AJAX 加入物件時就糗大啦 ( 永遠無法突破的隱形牆 = = )





想不到他們之間居然出現了第三者 ( clearfix )
讓整件事越來越撲朔迷離


先介紹一下到底第三者是甚麼
其實 clearfix 只是一種寫法
將原本包含浮動的容器加上另一個樣式
來達到清除浮動的效果

所以我們的 HTML 部分改成這樣

<div id='container clearfix'>
  <div class='item'>item1</div>
  <div class='item'>item2</div>
  <div class='item'>item3</div>
</div>

另外在 DOM 物件點名報數時
.clear 其實內部沒有任何內容
只是用來做清除浮動的
卻也會被當成是一個物件算進來 ( 湊甚麼熱鬧 ? )

因此本期 CSS 的故事就是來介紹 float 浮動 的新朋友 clearfix
clearfix 長得是這樣的

 .clearfix:before,
 .clearfix:after {
   display:table;
   line-height:0;
   content:"";
 }
 .clearfix:after {
   clear:both;
 }

在 CSS 中有一種特殊稱之為 偽類 ( pseudo class ) 的用法
after 和 before 正是其中之二

而 .clearfix 的 after 意思便是在使用這樣式的容器 內部
在最後面的地方插入一個虛擬的空間來做 clear
這虛擬的空間並不會因為 javascript append 物件而改變他在最後面的事實
如此便達到清除浮動的效果

不過說了這麼多  原來基本的道理都是一樣的
但 before 是用來做甚麼的呢 ?
話說要了解他的用途
就必須先談談 Block 元素的神奇 margin 計算方式

感謝收看本期的內容
並敬請期待下期的 CSS 的故事: .clearfix 的前世今生

W3C CSS 速查字典
  浮動 ( float )    http://www.w3schools.com/cssref/pr_class_float.asp
  清除 ( clear )   http://www.w3schools.com/cssref/pr_class_clear.asp