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


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


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

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

最新評(píng)論