最近業(yè)務需要，想設(shè)計一個比較通用的圖文混排的列表。結(jié)果設(shè)計的過程中遇到了不少問題，雖然都是一些css設(shè)計中比較基礎(chǔ)的問題，但是自己認為有必要總結(jié)下，希望可以幫到一些css設(shè)計的初學者，同時也想擴大下自己博客的知識量o(^_^)o。
1.最終設(shè)計的結(jié)果
 
HTML（部分，后面的li還有被省略了，當然外面的div也是應該關(guān)閉的，大家注意。）代碼


CSS（主要的ul部分）代碼：


2.float的幾個關(guān)鍵問題
經(jīng)常使用float，但是有幾個關(guān)鍵點是必須要說明的。
float一開始是為了實現(xiàn)文本環(huán)繞的效果。它與position的絕對定位是有區(qū)別的，主要的地方在于，float的元素仍然處于“流”中，而絕對定位脫離了“流”。這樣的影響就是：如果你修改了浮動元素的css，它可能會影響到周圍的元素顯示，而絕對定位的元素修改后不影響周圍元素。
設(shè)置了float后元素就變成了塊級元素。浮動的元素始終是塊級元素，即使將樣式修改為display：inline也不會使它的方式發(fā)生改變。
float的浮動效果并不一定永遠是合適的，要理解什么時候使用float，什么時候要清除float。其實這個可以從float設(shè)計的本質(zhì)來考慮，它一開始是為了讓周圍的元素環(huán)繞自己。所以當你不想讓后面的元素再環(huán)繞包圍float元素的時候就要考慮清除float了（解釋了為什么要清除浮動）。
有些時候，我們清除float只是為了避免“潛在”的對其他元素的影響（所以有時候你會發(fā)現(xiàn)：有的代碼中去掉清除浮動的代碼，頁面顯示效果也是一樣的），但是清除浮動絕對是一種很好的習慣。
3.清除浮動的方式
浮動元素后添加清除元素：
這種方法是在外圍div底部添加一個元素，然后給它定義clear：both的樣式。它需要添加額外的html代碼，使用起來不是很方便。
讓外圍元素也浮動：
這種方法是讓外圍的元素也浮動起來，讓它包含所有的浮動元素，但是它需要在后面的元素中添加clear的樣式，還是要添加額外代碼。
使用overflow：hidden：
你可以在外圍元素上添加上這樣的樣式，它會強制讓外圍的元素包含里面的浮動元素。如果你遇到過ul的背景延伸不到里面所有float的li元素的情況，那么你應該對這種使用方法很熟悉了。但是這種方式也有問題，就是如果li有個下拉菜單什么的絕對定位的元素時，它很可能就顯示不出來了，悲劇。。。
“簡單清除法”：
代碼中的.gclearfix類就是使用這樣的方法，具體代碼網(wǎng)上已經(jīng)介紹很清楚了，如果你還不了解可以去查找更具體的“簡單清除法”的介紹。
雖然它也增加了額外的html，但是非常可靠，可以保證兼容性的清除浮動。所以我推薦你也使用這樣的方法。
4.IE6下的“雙邊距”問題
“雙邊距”問題產(chǎn)生的條件：IE6下，給浮動元素在浮動方向上設(shè)置了margin值，并且浮動元素的邊距碰到了外圍塊的邊沿。
以上三個條件缺一不可，前兩個比較好理解，后一個需要注意下，如果浮動元素的前面也有一個相同方向的浮動元素，那么后面的浮動元素是不會觸發(fā)“雙邊距”問題的。
IE6下的“雙邊距”現(xiàn)象：

從上圖可以明顯看出最左邊的兩個li的margin-left要明顯大于其他的li。更嚴重的問題，如果每個li是精心設(shè)置恰好站好一行的話，那么“雙邊距”可能把有些li“擠到”下面一行去，導致float drop的問題。
解決的辦法也很簡單，只要給float的元素添加一個display：inline的樣式就可以了。
我在上面的css代碼中使用了一個hack（并做了注釋），只讓IE6來識別，避免”雙邊距“問題，其他瀏覽器不識別這個樣式。
5.總結(jié)
代碼中的一部分html的標簽設(shè)計的并不是特別好，后續(xù)想辦法持續(xù)改進吧。特別是在寫樣式表的時候，發(fā)現(xiàn)良好的html結(jié)構(gòu)是提高設(shè)計css效率的重要方面。
其實這個設(shè)計比較簡單，但是自己看看還是有比較多的地方（float、兼容性、標簽語義化等）需要注意，而且越去深挖，越是覺得有必要要mark下，說不定什么時候自己就一不小心掉進”坑“里了。

最新評論