记:安卓上的行内元素清除浮动失效
首先说明一下,我所使用的清除浮动的方法如下:
.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;