看下面的HTML代碼：
<ul style="width:440px;">
<li style="border:4px solid #ff6633; background:#ffffc0;"></li>
</ul>
結(jié)果如下圖（截自Firefox瀏覽器，無其他樣式干擾，下同）：
li元素為什么會有高度？如果您認(rèn)真讀過前半部分內(nèi)容關(guān)于line boxes模型與高度的關(guān)系的內(nèi)容，應(yīng)該知道，由于圖片沒有應(yīng)用float屬性，其本身有一個正常的inline box，這個inline box高度等于圖片的height，在這行元素中，圖片這個inline box的高度最高，于是傳遞給了line box，line box是個真正意義上的高度，直接作用于containing box（就是這里的li元素，使li元素有一個高度）。理解了這個您就會明白為什么要是這里的圖片添加了float屬性，li高度會塌陷了：浮動破壞了inline box。
這里的li沒有添加float屬性，可以見到li寬度100%自適應(yīng)于父ul標(biāo)簽。一切顯得那么的和諧！
單個左浮動的li元素
看下面的HTML代碼：
<ul style="width:440px;">
<li style="border:4px solid #ff6633; background:#ffffc0; float:left;"></li>
</ul>
結(jié)果如下圖：
相比上面而言，這里多了個float:left;，浮動的“包裹性”一目了然：水平方向上，li寬
度緊貼內(nèi)部元素。我在前文曾說過這么句結(jié)論性的話：“撇開浮動的‘破壞性’，浮動就是個帶有方位的display:inline-block屬性”。這不難理解，您可以講這里的float:left;改成display:inline-block;最后實現(xiàn)的效果基本上就是一樣的。display:inline-block將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。所謂對象呈遞為內(nèi)斂對象就是元素呈遞為inline box，所以浮動“包裹性”所產(chǎn)生的結(jié)果就是使得元素轉(zhuǎn)為了line box模型中的inline box元素。
浮動的“包裹性”讓元素變成類似于inline box的元素，而浮動的“破壞性”正是破壞inline box元素的，這其中豈不有矛盾。其實非也，對于block水平的這類塊狀元素需要先讓其變成類似效果的內(nèi)聯(lián)元素，然后再破壞之，實乃先誘拐再奸殺的生動實例??！
又是我反復(fù)提到的，浮動破壞了inline box，也就是破壞了高度，所以這里含有浮動屬性的li元素實際上是沒有高度的。所以呢，要是后面還有同樣的li標(biāo)簽的話，就會水平對齊排列的。如下：
相比上面而言，這里多了個float:left;，浮動的“包裹性”一目了然：水平方向上，li寬
度緊貼內(nèi)部元素。我在前文曾說過這么句結(jié)論性的話：“撇開浮動的‘破壞性’，浮動就是個帶有方位的display:inline-block屬性”。這不難理解，您可以講這里的float:left;改成display:inline-block;最后實現(xiàn)的效果基本上就是一樣的。display:inline-block將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。所謂對象呈遞為內(nèi)斂對象就是元素呈遞為inline box，所以浮動“包裹性”所產(chǎn)生的結(jié)果就是使得元素轉(zhuǎn)為了line box模型中的inline box元素。
浮動的“包裹性”讓元素變成類似于inline box的元素，而浮動的“破壞性”正是破壞inline box元素的，這其中豈不有矛盾。其實非也，對于block水平的這類塊狀元素需要先讓其變成類似效果的內(nèi)聯(lián)元素，然后再破壞之，實乃先誘拐再奸殺的生動實例啊！
又是我反復(fù)提到的，浮動破壞了inline box，也就是破壞了高度，所以這里含有浮動屬性的li元素實際上是沒有高度的。所以呢，要是后面還有同樣的li標(biāo)簽的話，就會水平對齊排列的。如下：
多個左浮動的li元素
看下面的HTML代碼：
<ul style="width:440px;">
<li style="border:4px solid #ff6633; background:#ffffc0; float:left;"></li>
<li style="border:4px solid #ff6633; background:#ffffc0; float:left;"></li>
</ul>
結(jié)果如下圖：
解決高度塌陷的問題 – 清除浮動
CSS中有個討論較多的話題就是如何清除浮動，清除浮動其實就一個目的，就是解決高度塌陷的問題。為什么會高度塌陷？什么時候會高度塌陷？塌陷原因是：元素含有浮動屬性 – 破壞inline box – 破壞line box高度 – 沒有高度 – 塌陷。什么時候會塌陷：當(dāng)標(biāo)簽里面的元素只要樣子沒有實際高度時會塌陷。所以呢，并不是只要有浮動元素就會坍塌，就要清除的，CSS水平高低衡量的標(biāo)準(zhǔn)之一就是改用什么樣式就用什么樣式，不多用也不少用。
下面就來講講如何清除浮動，zxx:寫到這兒，一下子輕松了。
IE下清除浮動準(zhǔn)則很簡單，使元素haslayout就可以了。如寬度值，高度值，絕對定位，zoom，浮動本身都可以讓元素haslayout。顯然，首選zoom:1;不會干擾任何樣式。非IE瀏覽器常用的是overflow屬性，overflow:hidden;或是overflow:scroll都可以，不過由于后者經(jīng)常一不小心出現(xiàn)滾動條，所以前者用的更多些。由于現(xiàn)代瀏覽器都支持after偽類偽元素，所以常常也會用after寫入一個clear屬性的元素清除浮動。當(dāng)然，最投機取巧的方法就是直接一個<div style="clear:both;"></div>放到當(dāng)作最后一個子標(biāo)簽放到父標(biāo)簽?zāi)莾?。下面小結(jié)這幾個方法。
- 投機取巧法
就是直接一個<div style="clear:both;"></div>放到當(dāng)作最后一個子標(biāo)簽放到父標(biāo)簽?zāi)莾?，此方法屢試不爽，兼容性強，使用方便，是初學(xué)時使用的上佳之選。但是我從來不用，因為我看到的是個巨大的浪費，浪費了一個標(biāo)簽，而且只能使用一次，我個人是無法容忍的，所以這個方法不推薦。而且有時候一不留神中間多了個空格會產(chǎn)生一段空白高度的。
- overflow + zoom方法
.fix{overflow:hidden; zoom:1;}
此方法優(yōu)點在于代碼簡潔，涵蓋所有瀏覽器，可謂不錯的選擇啊。不過也是有問題的，就是這個overflow:hidden;是個小炸蛋，要是里面的元素要是想來個margin負(fù)值定位或是負(fù)的絕對定位，豈不是直接被裁掉了，所以此方法是有不小的局限性的。我一般不用這個方法，只是有時候順便去除浮動時用用。
- after + zoom方法
先來簡單講講after，所謂after，就是指標(biāo)簽的最后一個子元素的后面。于是呢，我們可以用CSS代碼生成一個具有clear屬性的元素，其中的關(guān)鍵樣式就是content了。或許您從網(wǎng)上看到的content里面的內(nèi)容是”.”一個點，我了很多次，貌似隨便寫什么東西都沒有問題，比如content:'clear both';沒問題，或是content:'張鑫旭'也是ok的。于是有：
.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
這里的line-height:0寫成height:0也是可以的。此方法可以說是綜合起來最好的方法了，我都是用這個樣式清除浮動的，不會影響任何其他樣式，通用性強，覆蓋面廣，我很推薦哦。
九、float與JavaScript
JavaScript可以改變CSS的屬性，其他些屬性還好，但是這個float值得一說，為何呢，因為float貌似是JavaScript中的一個關(guān)鍵字，不能使用obj.style.float="left";這樣的句子。得使用其他寫法。
IE瀏覽器：
obj.style.styleFloat = "left";
其他瀏覽器：
obj.style.cssFloat = "left";
