1. <style type="text/css">     body,ul{padding:0;margin:0;}   
2.  ul{list-style-type: none;border:1px solid #ccc;}     li{padding-left:0;}   
3.  .list{width:300px;margin:100px auto;}     .list li{height:24px;line-height: 24px;border-bottom: 1px solid #ccc;margin-bottom:-1px;padding-left: 10px;}   
4.  .list li span{float:rightright;margin-right:10px;}     .list li .float_a{float:left;}   
5.  .fix {*zoom:1;}     .fix:after {display: block; content: ".";visibility: hidden;clear: both;height: 0;overflow: hidden;}   
6. </style>  

二、各瀏覽器效果圖

三、原因分析
1.標(biāo)準(zhǔn)參考：
W3C CSS2.1規(guī)范文檔里對(duì)于浮動(dòng)元素與非浮動(dòng)行內(nèi)元素相鄰時(shí)的情況有如下解釋。以下是關(guān)鍵段落：
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there’s a line box, the top of the floated box is aligned with the top of the current line box.
由上面的描述可以得到以下結(jié)論：如果一個(gè)元素浮動(dòng)前是一個(gè)行內(nèi)元素，則該元素浮動(dòng)后，頂部應(yīng)與其之前所在的行框頂部對(duì)齊。
2.問題描述：
IE6 IE7 IE8(Quick)下，若浮動(dòng)元素之前存在兄弟行內(nèi)非浮動(dòng)元素，IE 會(huì)將浮動(dòng)元素所在的“當(dāng)前行”認(rèn)為是其前邊的兄弟行內(nèi)元素所產(chǎn)生的匿名框的底邊，導(dǎo)致該浮動(dòng)元素折行。

四、解決方案
1.全浮動(dòng)