最近業務需要，想設計一個比較通用的圖文混排的列表。結果設計的過程中遇到了不少問題，雖然都是一些css設計中比較基礎的問題，但是自己認為有必要總結下，希望可以幫到一些css設計的初學者，同時也想擴大下自己博客的知識量o(^_^)o。
1.最終設計的結果。
HTML（部分，后面的li還有被省略了，當然外面的div也是應該關閉的，大家注意。）代碼：
1 <div id="jingdian" class="span24 gmodule g-box"> 2 <div class="g-box-hd"> 3 <h3>景點爆棚</h3> 4 </div> 5 <div class="g-box-bd"> 6 <ul class="gfixlist gclearfix"> 7 8 <li> 9 <div class="gfixlist-hd"> 10 <h3><a href="http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN">浙江66萬游客爭睹海寧潮</a></h3> 11 </div> 12 <div class="gfixlist-bd gclearfix"> 13 <div class="pic"> 14 <a href="http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN"> 15 <img src="http://p1.qhimg.com/d/_hao360/2012/shuangjie/baopeng1.jpg" alt="浙江66萬游客爭睹海寧潮"> 16 </a> 17 </div> 18 <div class="txt"> 19 <a class="title" href="http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN">浙江66萬游客爭睹海寧潮浙江66萬游客爭睹海寧潮</a> 20 <a class="gray" href="http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN">“八月十八潮，壯觀天下無”，非常壯觀的海寧潮引來66.5萬人次的游客。“八月十八潮，壯觀天下無”，非常壯觀的海寧潮引來66.5萬人次的游客。</a> 21 <a class="more red" href="http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN" >[詳細]</a> 22 </div> 23 </div> 24 <div class="gfixlist-ft"> 25 <h3><a href="http://www.tudou.com/programs/view/V542ersQ6rA?FR=LIAN">浙江66萬游客爭睹海寧潮</a></h3> 26 </div> 27 </li>
CSS（主要的ul部分）代碼：
1 @charset utf-8; 2 /* comm gfixlist*/ 3 .gfixlist{padding-bottom: 20px;} 4 /* 下面的li中的display:inline;純粹是為了解決IE6下的雙邊距問題 */ 5 .gfixlist li{_display: inline;float: left;margin: 20px 0 0 20px;text-align: center;width: 290px;} 6 .gfixlist li .pic{float: left;margin-right: 10px;width: 120px;height: 95px;} 7 .gfixlist li .txt{float: left;width: 160px;height:92px;overflow: hidden;text-align: left;} 8 .gfixlist li .txt .title{display: block;color: #16387C;font-weight: bold;white-space: nowrap;} 9 .gfixlist li .txt .title:hover{color: #F60;} 10 .gfixlist li .txt .more:hover{text-decoration: underline;}
2.float的幾個關鍵問題。
經常使用float，但是有幾個關鍵點是必須要說明的。
float一開始是為了實現文本環繞的效果。它與position的絕對定位是有區別的，主要的地方在於，float的元素仍然處於“流”中，而絕對定位脫離了“流”。這樣的影響就是：如果你修改了浮動元素的css，它可能會影響到周圍的元素顯示，而絕對定位的元素修改后不影響周圍元素。
設置了float后元素就變成了塊級元素。浮動的元素始終是塊級元素，即使將樣式修改為display：inline也不會使它的方式發生改變。
float的浮動效果並不一定永遠是合適的，要理解什么時候使用float，什么時候要清除float。其實這個可以從float設計的本質來考慮，它一開始是為了讓周圍的元素環繞自己。所以當你不想讓后面的元素再環繞包圍float元素的時候就要考慮清除float了（解釋了為什么要清除浮動）。
有些時候，我們清除float只是為了避免“潛在”的對其他元素的影響（所以有時候你會發現：有的代碼中去掉清除浮動的代碼，頁面顯示效果也是一樣的），但是清除浮動絕對是一種很好的習慣。
3.清除浮動的方式。
浮動元素后添加清除元素：
這種方法是在外圍div底部添加一個元素，然后給它定義clear：both的樣式。它需要添加額外的html代碼，使用起來不是很方便。
讓外圍元素也浮動：
這種方法是讓外圍的元素也浮動起來，讓它包含所有的浮動元素，但是它需要在后面的元素中添加clear的樣式，還是要添加額外代碼。
使用overflow：hidden：
你可以在外圍元素上添加上這樣的樣式，它會強制讓外圍的元素包含里面的浮動元素。如果你遇到過ul的背景延伸不到里面所有float的li元素的情況，那么你應該對這種使用方法很熟悉了。但是這種方式也有問題，就是如果li有個下拉菜單什么的絕對定位的元素時，它很可能就顯示不出來了，悲劇。。。
“簡單清除法”：
代碼中的.gclearfix類就是使用這樣的方法，具體代碼網上已經介紹很清楚了，如果你還不了解可以去查找更具體的“簡單清除法”的介紹。
雖然它也增加了額外的html，但是非常可靠，可以保證兼容性的清除浮動。所以我推薦你也使用這樣的方法。
4.IE6下的“雙邊距”問題。
“雙邊距”問題產生的條件：IE6下，給浮動元素在浮動方向上設置了margin值，並且浮動元素的邊距碰到了外圍塊的邊沿。
以上三個條件缺一不可，前兩個比較好理解，后一個需要注意下，如果浮動元素的前面也有一個相同方向的浮動元素，那么后面的浮動元素是不會觸發“雙邊距”問題的。
IE6下的“雙邊距”現象：
從上圖可以明顯看出最左邊的兩個li的margin-left要明顯大於其他的li。更嚴重的問題，如果每個li是精心設置恰好站好一行的話，那么“雙邊距”可能把有些li“擠到”下面一行去，導致float drop的問題。
解決的辦法也很簡單，只要給float的元素添加一個display：inline的樣式就可以了。
我在上面的css代碼中使用了一個hack（並做了注釋），只讓IE6來識別，避免”雙邊距“問題，其他瀏覽器不識別這個樣式。
5.總結
代碼中的一部分html的標簽設計的並不是特別好，后續想辦法持續改進吧。特別是在寫樣式表的時候，發現良好的html結構是提高設計css效率的重要方面。
其實這個設計比較簡單，但是自己看看還是有比較多的地方（float、兼容性、標簽語義化等）需要注意，而且越去深挖，越是覺得有必要要mark下，說不定什么時候自己就一不小心掉進”坑“里了。