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

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

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

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

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

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

單個無浮動的li元素

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表