1. 浮動的非本職工作

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

1.1 單個無浮動的li元素

HTML:

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

1.2 單個左浮動的li元素

HTML：

通過添加浮動，讓li喪失高度，現在的高度完全是由圖片的自身高度撐起來的(包裹性)

浮動的“包裹性”讓元素變成類似于inline box的元素，而浮動的“破壞性”正是破壞inline box元素的，這其中豈不有矛盾。其實非也，對于block水平的這類塊狀元素需要先讓其變成類似效果的內聯元素，然后再破壞之，實乃先誘拐再奸殺的生動實例啊！

1.3 多個左浮動的li元素

HTML:

因為浮動的破壞性導致添加浮動后的li元素的高度為0，所以所有的li都是并排顯示，但是因為圖片的真實存在所以并沒有產生覆蓋而是緊貼著顯示

1.4 左浮動的li元素和無浮動的li元素

HTML:

因為添加浮動的li的高度為0，所以假設這個li壓根是不存在的，從而后面的li直接無視前面的li元素，寬度100%顯示，只是圖片本身是實體的原因導致圖片和圖片之間無法重疊顯示，所以圖片靠在一起

2. 證據

前文是著重分析了浮動的“本職工作”：文字環繞顯示；本文著重分析了浮動的“非本職工作”：列表布局；兩者都是用的同樣的原理解釋的，那么有什么證據可以證明“頁面布局”不是浮動的“本職工作”呢。答案關鍵字就是：高度塌陷

HTML:

上圖顯示ul高度為0，這是必然的，正常的，應該的。您要是在IE下看到ul有高度，認為這是Firefox等瀏覽器有問題就錯了，您把ul的width屬性去掉，看看，會發現IE下ul高度也為0， 這是IE的layout作祟。至于為什么ul高度為0，我前面很多地方都已經講了，不再說了。但是，從中我們可以看到，浮動本不是用來列表布局的，而是用來使元素環繞顯示的，因為元素環繞（例如文字），其自身是含有inline boxes高度的，這是inline水平的元素形成高度的基礎，所以雖然浮動元素沒有高度，但是其周圍環繞的元素是有高度的，只要環繞元素比浮動元素高度高，父標簽無高度的問題自然也就沒有了，也就形成了文字環繞的效果，但是純粹一堆浮動元素會有高度嗎？沒有，自然而然父元素高度就會塌陷。所以浮動元素塌陷的問題根本就不是瀏覽器的bug，而是我們沒有正確地深入地了解浮動，是我們自己使用不當，因為浮動本不應該用在這里的

3. 解決高度塌陷的問題 – 清除浮動

CSS中有個討論較多的話題就是如何清除浮動，清除浮動其實就一個目的，就是解決高度塌陷的問題。為什么會高度塌陷？什么時候會高度塌陷？塌陷原因是：元素含有浮動屬性 – 破壞inline box – 破壞line box高度 – 沒有高度 – 塌陷。什么時候會塌陷：當標簽里面的元素只有樣子沒有實際高度時會塌陷。所以呢，并不是只要有浮動元素就會坍塌，就要清除的，CSS水平高低衡量的標準之一就是改用什么樣式就用什么樣式，不多用也不少用

3.1 投機取巧法

就是直接一個放到當作最后一個子標簽放到父標簽那兒，此方法屢試不爽，兼容性強，使用方便，是初學時使用的上佳之選。但是我從來不用，因為我看到的是個巨大的浪費，浪費了一個標簽，而且只能使用一次，我個人是無法容忍的，所以這個方法不推薦。而且有時候一不留神中間多了個空格會產生一段空白高度的

3.2 overflow + zoom方法

此方法優點在于代碼簡潔，涵蓋所有瀏覽器，可謂不錯的選擇啊。不過也是有問題的，就是這個overflow:hidden;是個小炸蛋，要是里面的元素要是想來個margin負值定位或是負的絕對定位，豈不是直接被裁掉了，所以此方法是有不小的局限性的。我一般不用這個方法，只是有時候順便去除浮動時用用

3.3 after + zoom方法

先來簡單講講after，所謂after，就是指標簽的最后一個子元素的后面。于是呢，我們可以用CSS代碼生成一個具有clear屬性的元素，其中的關鍵樣式就是content了?；蛟S您從網上看到的content里面的內容是”.”一個點，我了很多次，貌似隨便寫什么東西都沒有問題，比如content:’clear both’;沒問題，或是content:’張鑫旭’也是ok的。于是有

這里的line-height:0寫成height:0也是可以的。此方法可以說是綜合起來最好的方法了，我都是用這個樣式清除浮動的，不會影響任何其他樣式，通用性強，覆蓋面廣，我很推薦哦

總結：

1. 清除浮動的方法還是推薦使用’after+zoom’

2. 添加浮動后的圖片的容器的高度因為浮動的破壞性其高度變成了0，但是因為實體圖片自身的高度，所以后面的元素并不會覆蓋它，這也是浮動元素和絕對定位元素的最大區別

總結

以上是生活随笔為你收集整理的CSS之浮动（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。