首先说明一下，我所使用的清除浮动的方法如下：

.clearfix:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;}

.clearfix{*zoom:1;}

这个我就不多讲了；直接上代码说问题

CSS：

a{/*display:block;*/}/*此时a标签一定要设为块元素，不然错乱*/

.fl{float:left;}

.wrap:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;}

.wrap .fl{

　　width:100px;

　　height:50px;

　　border:1px solid #000;

}

HTML：

<div class="wrap">

　　<span class="fl">1</span>

　　<span class="fl">2</span>

</div>

<span class="wrap">

　　<span class="fl">1</span>

　　<span class="fl">2</span>

</span>

一些文字

<span class="wrap">

　　<div class="fl">1</div>

　　<div class="fl">2</div>

</span>

一些文字

OK，那么看到这些东西，脑子里浮现的应该是这种形式

没错，PC浏览器好好的，IOS浏览器好好的，BUTTTTTT！

安卓浏览器是酱紫的

试验证明，如果外围用a 或者 span 包裹的话，就是这个鸟样，这两个的共同点就是，都是行内元素，所以解决办法就是

加上display:block;