接上回…css float浮動屬性的深入研究及詳解拓展(一)

浮動的本職工作是讓匿名inline boxes性質的文字環繞圖片顯示，而其他所有用浮動實現的效果都不是浮動應該做的事情，我稱之為“非本職工作”。

或許我們并沒有過多的深思，把一些實際上不是浮動該干的事情當作“這必須用浮動來實現”。舉個常見的例子，列表顯示，見下面的圖，截自淘寶新版首頁：

我不看代碼就知道是用浮動實現的，我用firebug一看，果然是，不僅浮動，而且定寬。ps:要是在幾個月以前，我會覺得這實在有待改進，不過現在我的心態寬了，布局思想不同而已，沒有孰對孰錯之分。

我可以確信，浮動這個屬性誕生的那天壓根沒有想到自己會要做這樣的事情，本來它以為自己就讓文字環繞顯示就OK了，功德圓滿了，結果，在web2.0的時代，其卻在頁面布局中被濫用。可能有人會反駁，你何處此言，有何證據？

我們只要靜下心來好好想想浮動的本質，實現的原理，就可以知道為什么浮動本不應該用來對頁面進行布局。還記得上一部分所說的浮動的本質嗎？即“包裹與破壞”。我們可以用這個（“包裹與破壞”）解釋為什么浮動可以讓li這類block水平的元素水平排列。

單個無浮動的li元素

這里的li元素為什么會有高度？如果您認真讀過前半部分內容關于line boxes模型與高度的關系的內容，應該知道，由于圖片沒有應用float屬性，其本身有一個正常的inline box，這個inline box高度等于圖片的height，在這行元素中，圖片這個inline box的高度最高，于是傳遞給了line box，line box是個真正意義上的高度，直接作用于containing box（就是這里的li元素，使li元素有一個高度）。理解了這個您就會明白為什么要是這里的圖片添加了float屬性，li高度會塌陷了：浮動破壞了inline box。這個后面會詳細講解。