說好的不寫寬度呢？那些 inline-block 區塊的處理方式

放了個年假

大家有沒有很開心呢~~

但今天的課題有點嚴肅 ( 哪來的嚴肅 ! )

這篇是繼上一篇 放開那張圖片，神秘的 overflow 大功用 的續集

讓我們一起來看看 CSS 的世界到底發生了甚麼事？

傳說中每個 HTML 標籤都有一個詛咒

這詛咒決定他們的樣貌與能力

如果抵抗這個詛咒，那個他就會 .... 

放開那張圖片，神秘的 overflow 大功用

我當初學 CSS 的時候
以為 CSS 設計師的眼睛要變成方的
CSS 才會寫的好 = =

因為對於 HTML 來說每個區塊都是方的
在區塊間你推我、我擠你的過程中 網頁就顯示好了
這真的是太神奇不是嗎
但今天要說的是一個不按牌理出牌腳色
首先我們先來看看這個應用

這是很基本的 Profile 架構
左邊放張大頭照、右邊寫點文字
我們可以這樣子寫

<style>

   .profile {}

   .profile .photo {float:left; width:150px; height:150px} 

   .profile .note   {float:left; width:400px} // .clearfix 省略 

</style>

<div class='profile clearfix'> 

   <div class='photo'> <img src='photo.jpg' /> </div> 

   <div class='note'> 文字部分 </div>

</div>

其實這樣寫基本沒有甚麼問題
我們可以利用 浮動 (Float) 將圖片與文字區塊設定好寬度後都靠左如此這般這不就搞定了嗎？
可是事情永遠沒有想的這樣簡單
計畫永遠趕不上變化
如果畫面的寬度被調整
這會變成怎麼樣呢
我們可以看到 .profile 這個區塊並沒設寬度
而 div 屬 block 元素，寬度會被母元素限制
因此只要整體寬度有變動
假設在大頭照在長寬相同的情況下

• 變大，因設定寬度的 .note 文字部分右邊就會空出很多空間
• 變小，.note 會因為空間不夠而擠到圖片下面

說白了就是糗大了
每次調整寬度都像是場地獄
整天調寬度就飽啦，可能還有一堆漏掉的
光檢查就搞死人了還寫個屁啊？
正當我忿忿然的想這件事時
突然有幾個想法飄過 
<div> 設浮動後，除指定大小外，寬高不是隨內容物變大縮小嗎？
通常都是文字區塊的部分需調整寬高，如果不加上浮動與寬度的話，他的範圍是不是也還受到母元素的限制呢？

也因此我改成這樣把 .note 樣式全拿掉
<style> 
   .profile {} 
   .profile .photo {float:left; width:150px; height:150px} 
   .profile .note   {} // clearfix 省略 
</style> 

<div class='profile clearfix'>
   <div class='photo'> <img src='photo.jpg' /> </div> 
   <div class='note'> 文字部分 </div> 
</div>

正當按下 F5 的那一刻，我真的感動得快哭了這不就是我一直在尋找的效果嗎？
終於可以告別在那邊微調寬度的苦差

大頭照簡單設了 margin-right 讓他與文字空開點後 ...etc也沒有特別搞懂為甚麼可以
我就開心的下班了 (唉呦，有時候就是懶惰碼)
果然好景不長，這種寫法還是有點問題
在文字部分如果很長的話，也就是高度很高的情況下
畫面變成了這樣

文字區塊，快放開那張圖片

你到底想要把觸手伸到哪裡去 ( 誤 = = )
程式範例：http://jsfiddle.net/culaido/3XyyS/
咳咳，以上是不負責任發言
事實上這是叫文繞圖
在不經意的情況下被試了出來
雖然文繞圖也是常見的顯示方式
但這不是我要的效果~~~

這以區塊來看大頭照 與 文字區塊 重疊在一起
重疊部分的文字被圖片推開了

難道我又得走回設寬度的老路嗎？好不容易找到的好解法要放棄掉嗎？
正當我煩搞之際我又想到一件事
以前的人很喜歡用 overflow 來清除浮動
又看到 W3C 規格書的這段 
9.4.1 Block formatting contexts
http://www.w3.org/TR/CSS21/visuren.html#block-formatting
規格書說白了意思就是 浮動 的區塊會與 相鄰非浮動 
或 overflow 不為 visible 的區塊相重疊 ( 規格書最大~~ 其實最大的是瀏覽器 = = )也因此我在 .note 加上樣式 overflow:hidden
這樣文字區塊就不會與圖片重疊
就是當初要的效果啦
這是我的成果範例 http://jsfiddle.net/culaido/nmBJa/

又是故事結束的時候，感謝收看本期的內容並敬請期待下期 CSS 的故事: 說好的不寫寬度呢？那些 inline-block 區塊的處理方式
=============== 我是不可思議分隔線 ===============

在 CSS 架構設計上怎樣才是好的，實際上這並沒有定論畢竟有非常多門派與方法
也是個非常主觀又跟畫面有非常大的相關

• 一般工程師對此也不太重視 ( 畫畫甚麼的要了我的命 )
• 一般美術設計也對此一知半解 ( 程式？那是甚麼我不會 )

但我給自己訂了一個方法好壞的評斷規則之一 ( 註1 )
能夠適應各種變化的 CSS 就是好的設計 (註2)


註：   寫 CSS 的準則，因為這方面沒多少專家，因此我訂了幾條準則，來避免可能發生的錯誤 
   因為我很懶，壓根不想回去改他 ^^

.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 呢