哇靠！CSS 怎越寫越多 這叫工程師情何以堪 = =

可能礙於時間或種種其他原因

專案進行最常發生的就是
Code 越寫越多 ( 這不是廢話嗎 = = ) 

咳~ 咳~ 
其實我指的是越寫越爛 ！！

inline-block 來一個殺一個 來兩個殺一對

我們都知道，現今社會險惡  人心不古
人們不再單純
 導致慾望無窮無盡

HTML 標籤也是一樣的 ( 啥鬼 )
不單純的標籤就難以排版

不 reset, normalize 總行吧 ! Bootstrap 的現身說法

大家好 又到了 CSS Storia 時間
這是繼上一篇 CSS Reset 那是甚麼? why & why not? 的後續
讓我們繼續探討 CSS Reset 的何去何從

說好的不寫寬度呢？那些 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 的準則，因為這方面沒多少專家，因此我訂了幾條準則，來避免可能發生的錯誤 
   因為我很懶，壓根不想回去改他 ^^

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>