CSS float浮動的深入研究、詳解及擴充(一)
CSS float浮動的深入研究、詳解及擴充(二)
終極——浮動佈局更好的替代方案。

要注意，本文的佈局專指列表佈局。就是具有相同DOM結構的水平排列可以repeat出來的列表元素。

列表浮動佈局——float:left

對於浮動區域性的侷限性，就是每個列表元素的高度必須要一致，否則就會參差不齊。

使用浮動佈局還需要修復其帶來的副作用——高度塌陷的問題，也就是常提到的“清除浮動”了。
不過從國內領先網站的列表佈局情況來看，貌似浮動佈局還是紮根很深的（這回在列表佈局上，人人網讓我刮目了一把）。

三、提一提表格佈局
在表格佈局時代，我們基本上不用擔心列表元素高度不一會錯位的問題，表格中的單元格(標籤)自動回等高關聯，且水平列表項還包裹在等標籤中，所以，不可能發生錯位。所以，很正常的，我們會想到利用類似table屬性的樣式進行一些佈局，例如display:table，display:table-row，display:table-cell等屬性，對此我是建議您看看支付寶UED的“基於display:table的CSS佈局”（原文地址掛了很久了，所以被我下了）一文，如果不是受制於IE6/7對這些display屬性不支援，基於display:table的CSS佈局定會大放異彩的。
如果想使用display:table的CSS佈局來代替浮動佈局，權衡來看，不見得有提高。好的地方在於，不要擔心列表元素的高度不一，甚至自動等高。撇開相容性不談，其還有不足在於在後臺迴圈輸出時需要水平repeat下，然後再垂直repeat。既然這樣，還不如使用浮動佈局，因為在這種情況下，使用浮動也是可以不用擔心高度不一的問題的，這就是facebook好友列表的做法（oh, 該死，facebook上不去，想截個圖的）。所以，基本上，使用display:table的CSS佈局來代替浮動佈局是完全佔據下風的。因而，這裡就不瞎子點燈白費蠟了，如一絲寒意的秋風，輕輕帶過。

四、另外一種display屬性，display:inline-block
display:inline-block感覺與display:table-cell有些相似，例如對內部元素的包裹性。但是，由於display:inline-block最大的不同就是其沒有父元素的匿名包裹特性，這使得display:inline-block屬性的使用非常自由，可與文字，圖片混排，可內嵌block屬性元素，可以置身於inline水平的元素中。可謂黑白通吃，左右逢源。

inline-block屬性的元素適用於inline box模型，所以，當其中的列表元素高度不一時，是不會有錯位的。關於line box模型，我在之前的“css行高line-height的一些深入理解及應用”第二部分提到了，以及前面“CSS float浮動的深入研究、詳解及擴充(一)”一文的“浮動的破壞性”部分中做過比較詳細的介紹。一言以蔽之，就是每一行所有的inline元素和inline-block元素會共同形成一個line boxes，這個line box的高度由裡面最高的元素決定。所以，即使inline-block屬性的列表元素高度異常，撐開的是整個line boxes的高度，因而，不會與下一行的列表元素髮生錯位。如下面的我自己畫得拙劣的示意圖所示的：

根據一些前輩的說法，IE6/7不支援display:inline-block屬性，只是可以讓標籤有類似於inline-block的屬性，起初我也是接受這種說法的，不過後來又表示了懷疑，最近使用text-align:justify做測試的時候的一些樣式表現證實了：確實IE6/7是不支援display:inline-block屬性，只是讓其表現的跟inline-block一樣，尤其對於inline水平的元素，其表現度可以用perfect一詞來形容了。

對於IE8+以及現代瀏覽器，直接使用：

{display:inline-block;}
就可以了，支援任意水平的元素。

對於不支援的IE6/7瀏覽器該怎麼辦呢？如果是inline水平的元素（如a標籤，span標籤之類）跟上面一樣，直接：

{display:inline-block;}
就可以了，對於這兩個瀏覽器，其功效與*zoom:1;是一樣的。

如果是block水平的元素，例如li標籤。則需要多點程式碼，目前我知道的方法有兩個，如下所示：

li {display:inline-block;...}
li {display:inline;}
或者是：

li{display:inline; zoom:1;...}

block水平的inline-block化的元素與inline水平的在表現層又是有差異的，這個後面會談到。

五、一點小阻撓：inline-block元素間的換行符空格間隙問題

煉整理一下，有如下一些結論：
» block水平的元素inline-block化後，IE6/7沒有換行符間隙問題，其他瀏覽器均有；
» inline水平的元素inline-block後，所有主流瀏覽器都有換行符/空格間隙問題；
» font-size:0，去除換行符間隙，在IE6/7下殘留1畫素間隙，Chrome瀏覽器無效，其他瀏覽器都完美去除；
» letter-spacing負值可以去除所有瀏覽器的換行符間隙，但是，Opera瀏覽器下極限是間隙1畫素，0畫素會反彈，換行符間隙還原。

關於浮動會錯亂的問題——轉換思維尋找替代方案

相關文章