前言
事情還要回答一個月前，當時寒冬老師搞了一道position的面試題，我當時有幸給看到了，而且正是我要去外地的那天。
於是我那天上午便開始入魔了，寫完了博客才急急忙忙上飛機：
各位周末結束后都累了吧，那我們一起來看看【寒冬】的面試題吧（據說阿里的喲）
當時只是草草的回答了那道題，卻沒想到今天會再拿出來說事！對的，我還是搞不懂為什么float會導致元素坍塌！！！！
近期狀況
我CSS的名師是：張鑫旭（自認入門的）
最近引導者：寒冬
我CSS方面的東西除了之前的積累，基本來源於此兩人，各位可以關注下。
多數知識來源於張鑫旭，寒冬讓我把整個知識串了起來，雖然素不相識，在此謝過了。
引出問題
我最近一直在思考float實現的原理。
我最開始根據各種學習后產生了一個認識，float破壞了行內框inline boxes
從而導致塊級元素坍塌，因為塊級元素的高是line-height撐起來的，而line-height又來源於line boxes。
但是最近學習了BFC后，知道float觸發了bfc，導致其獨立了出來，所以元素被包裹了，這也是overflow清楚浮動的原理。
那么float到底做了些什么事情呢？？？
雖然我昨天病了，這個問題卻在腦中揮之不去，所以今天搞完js后，覺得還是有必要深究一下。
不研究就算了，一研究又發現一個高手，好像是前端觀察，只不過我不認識罷了。。。我這里也不管他是誰了，開始今天的學習吧。
clear：none=>閉合浮動
關於這個問題，我其實也必將迷糊的，因為我在用自己形成的CSS世界觀解釋問題時候一說到清楚浮動就感覺奇怪！
clear對應屬性：left, right, both, none
按道理說clear: none才是清除浮動啦
所以我們這里為他取名閉合浮動較為合理。而且他也解釋了為什么overflow可以導致坍陷消失。
haslayout與block formatting contexts
IE7以下特有的layout以及BFC再次光臨了，我都不知道最近有多少次提到他了。
通過之前我們的學習（清除浮動的具體例子我這里就不管了），想要解決高度塌陷的問題無非兩種方案：
① 在浮動元素末尾加上clear: both 屬性，強制其閉合元素
② 設置overflow或者display: table屬性觸發BFC（這里寒冬老師有不同的認識，他認為對名詞觸發不合適），從而解決坍塌問題。
關於BFC（現在他換了個馬甲叫做flow root），大家應該相對熟悉了。
我的理解是所有normal flow的元素皆處於同一BFC，float元素處於一個BFC，每個絕對定位單獨一個BFC
PS：此處有誤請提出來。
我們的BFC可以解決上外邊距疊加，可以強制包含float元素，通俗點說：
BFC就是一個獨立的盒子，里面的子元素不會再布局上影響外面元素，BFC依然屬於普通流
overflow閉合浮動的真相便是：
父級元素擁有了新的BFC，具有BFC的塊級元素可以包含浮動！
以上好像是官方定義了，再往下面挖就沒意思了。
IE6/7中沒有BFC這個概念，其自身實現的haslayout基本等同於BFC。
所以我們在IE6/7中閉合浮動時候要加上一句，zoom: 1的屬性觸發haslayout
真相到此為止？
以上就是追尋后得到的真相，雖然我還是不太滿意，雖然我還有點迷迷糊糊但是暫時這樣吧，在今后一段時間里面，我還會再回來回看這個問題。
屆時，我希望自己能找到自己想要的答案。
意外之喜
此次找尋答案過程中雖然沒有完全得到我想要的答案，卻意外得到了其它東西，他的名字便是inline-block。
對的，你沒有看錯，我要說的就是inline-block！
其實我們還是很喜歡人雲亦雲的，比如說我就一直認為IE7之前沒有inline-block這個屬性，其實這是大錯特錯的！
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 span { height: 100px; border: 1px solid black; } 6 .ib { display: inline-block; } 7 </style> 8 </head> 9 <body> 10 <span class="ib">葉小釵</span> <span>葉小釵</span> <span class="ib">葉小釵</span> 11 </body> 12 </html>
以上是標准瀏覽器，我們來看看我們的IE7：
大家看到了，雖然中間那塊有問題，但是我們的inline-block是沒有問題的！！！
其中中間那個家伙的底邊沒有了，大家知道是為什么的（layout）。
以上是行內元素，我們來看看塊級元素的表現。
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 div { height: 100px; border: 1px solid black; *zoom: 1 } 6 .ib { display: inline-block; } 7 </style> 8 </head> 9 <body> 10 <div class="ib"> 11 葉小釵</div> 12 <div class="ib"> 13 葉小釵</div> 14 <div> 15 葉小釵</div> 16 </body> 17 </html>
我們來看看IE7的表現：
這家伙直接沒有理我啊！！！所以說，並不是inline-block沒有，而只是對塊級元素的支持有問題罷了，所以我們對於塊級元素需要這么干：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 div { height: 100px; border: 1px solid black; } 6 .ib { display: inline-block; *zoom: 1; *display: inline; } 7 </style> 8 </head> 9 <body> 10 <div class="ib"> 11 葉小釵</div> 12 <div class="ib"> 13 葉小釵</div> 14 <div> 15 葉小釵</div> 16 </body> 17 </html>
雖然他們之間的間隔卻沒有了，卻達到了我們的目標。問題又來了：
inline-block為什么會有莫名的間隔？
注意看圖的朋友應該看到了，inline-block元素在現代瀏覽器中有間隔，我搞了很久查詢確實是有！
這是因為默認情況下inline元素之間就有間隔（IE7不會有間隔）！
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 div { height: 100px; border: 1px solid black; margin: 0; display: inline; } 6 </style> 7 </head> 8 <body> 9 <div class="ib"> 10 葉小釵</div> 11 <div class="ib"> 12 葉小釵</div> 13 <div> 14 葉小釵</div> 15 </body> 16 </html>
IE7
這個問題你抓破頭發都不會知道原因！！！
因為塊級元素搞成inline的時候，在編輯器中換號了，瀏覽器認為換行就是一個空格，所以將他們寫到一起吧！囧
此處我不再糾結下去了，附上抄來的解決空隙的代碼：
1 .dib-wrap { 2 font-size:0;/* 所有瀏覽器 */ 3 *word-spacing:-1px;/* IE6、7 */ 4 } 5 .dib-wrap .dib{ 6 font-size: 12px; 7 letter-spacing: normal; 8 word-spacing: normal; 9 vertical-align:top; 10 } 11 @media screen and (-webkit-min-device-pixel-ratio:0){ 12 /* firefox 中 letter-spacing 會導致脫離普通流的元素水平位移 */ 13 .dib-wrap{ 14 letter-spacing:-5px;/* Safari 等不支持字體大小為 0 的瀏覽器, N 根據父級字體調節*/ 15 } 16 } 17 .dib { 18 display: inline-block; 19 *display:inline; 20 *zoom:1; 21 }
結語
咳咳，其實我病了。。。我養傷去了，剛剛求妹子頂就有個兄弟踩了我下，現在求兄弟頂好吧。。。。