看下面的HTML代碼：
<ul style="width:440px;">
<li style="border:4px solid #ff6633; background:#ffffc0;"></li>
</ul>
結(jié)果如下圖（截自Firefox瀏覽器，無其他樣式干擾昏鹃，下同）：
li元素為什么會有高度？如果您認真讀過前半部分內(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標簽秕噪。一切顯得那么的和諧钳降！
單個左浮動的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標簽的話，就會水平對齊排列的巨双。如下：
相比上面而言噪猾，這里多了個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標簽的話们妥，就會水平對齊排列的猜扮。如下：
多個左浮動的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高度 – 沒有高度 – 塌陷煮盼。什么時候會塌陷：當標簽里面的元素只要樣子沒有實際高度時會塌陷源譬。所以呢，并不是只要有浮動元素就會坍塌孕似，就要清除的踩娘，CSS水平高低衡量的標準之一就是改用什么樣式就用什么樣式，不多用也不少用喉祭。
下面就來講講如何清除浮動养渴，zxx:寫到這兒，一下子輕松了泛烙。
IE下清除浮動準則很簡單理卑，使元素haslayout就可以了。如寬度值蔽氨，高度值藐唠，絕對定位，zoom鹉究，浮動本身都可以讓元素haslayout宇立。顯然，首選zoom:1;不會干擾任何樣式自赔。非IE瀏覽器常用的是overflow屬性妈嘹，overflow:hidden;或是overflow:scroll都可以，不過由于后者經(jīng)常一不小心出現(xiàn)滾動條绍妨，所以前者用的更多些润脸。由于現(xiàn)代瀏覽器都支持after偽類偽元素，所以常常也會用after寫入一個clear屬性的元素清除浮動他去。當然毙驯，最投機取巧的方法就是直接一個<div style="clear:both;"></div>放到當作最后一個子標簽放到父標簽?zāi)莾骸Ｏ旅嫘〗Y(jié)這幾個方法灾测。
- 投機取巧法
就是直接一個<div style="clear:both;"></div>放到當作最后一個子標簽放到父標簽?zāi)莾罕郏朔椒▽以嚥凰嫒菪詮娦惺褂梅奖阍始幔浅鯇W時使用的上佳之選。但是我從來不用蛾号，因為我看到的是個巨大的浪費稠项，浪費了一個標簽，而且只能使用一次鲜结，我個人是無法容忍的展运，所以這個方法不推薦活逆。而且有時候一不留神中間多了個空格會產(chǎn)生一段空白高度的。
- overflow + zoom方法
.fix{overflow:hidden; zoom:1;}
此方法優(yōu)點在于代碼簡潔拗胜，涵蓋所有瀏覽器蔗候，可謂不錯的選擇啊。不過也是有問題的埂软，就是這個overflow:hidden;是個小炸蛋锈遥，要是里面的元素要是想來個margin負值定位或是負的絕對定位，豈不是直接被裁掉了勘畔，所以此方法是有不小的局限性的所灸。我一般不用這個方法，只是有時候順便去除浮動時用用炫七。
- after + zoom方法
先來簡單講講after爬立，所謂after，就是指標簽的最后一個子元素的后面万哪。于是呢侠驯，我們可以用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";
