小記css中float浮動問題

脫離了tabel佈局的時代，div+css的佈局使咱們的網站更加靈活易用，可是發現初學者老是不約而同的犯一樣的錯誤，且有些還屢犯不改，呵呵，我想大約與我同樣，不少時候作事情只追求「解決」，而沒有研究其本質。 這篇博客記錄下個人經驗，歡迎指教。

 我今天想講一下浮動的問題。

 看上面這張圖片，這種排列的佈局是再常見不過了，固定寬度，固定高度，向左浮動就解決了。可是，這個設計中內容的多少是可變的，這就意味着若是這些塊中的一些內容比其餘的多，就會破壞這個佈局。 

 

 由於這種排列的總體性很是重要，我一邊會採起很是簡單的方法，超過隱藏：overflow:hidden; 固然若是是多行文字，這時你要設定元素的line-height屬性，好肯定它的高度正好顯示多少行文字。若是是單行，這在我前面總結的前端開發經驗中有提到的，加上white-space:nowrap; text-overflow:ellipsis;屬性。

 固然，最上面我放的圖片很明顯的就能發現它的佈局混亂緣由，可是若是是相差幾px的圖片就不那麼容易被發現了。因此，在css佈局中，咱們常常遇到一個忘記清除浮動的問題，像剛剛那個例子，若是文字都恰好2行，佈局作好後，若是不清除浮動，其實很難發現，可是以後跟着排列的標籤，根據瀏覽器不一樣，又可能發生兼容性的問題了。 

還有一個容易發生的浮動兼容性問題，有些剛接觸的孩子，會出現這種狀況：

 給leftdiv寫了float:left; 以後的rightdiv卻沒有寫float。這種寫法在不少瀏覽器是支持的，由於外面有個div的寬度限制，因此rightdiv自動就跟着左邊的div浮動了，然而在火狐瀏覽器缺失不行的，rightdiv會絕不留情的掉下來。 

 另外一個浮動的例子：

 遇到不知道文字長度的圖文混排，通常的作法是這樣的：在一個div中，把圖片float:right;而後文字就環繞着圖片混排了。

 介紹一篇文章：跨瀏覽器的inline-blockhttp://www.qianduan.net/cross-browser-inline-block.html 以上內容部分引入此文字資料，謝謝做者精彩翻譯。