码迷,mamicode.com
首页 > Web开发 > 详细

CSS之浮动那些事

时间:2014-05-31 20:02:28      阅读:332      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

1.清除浮动

下面是两种常用的方式,而这两招也够用了(不用千招会,只需一招精)。

1.结尾处加空div标签 clear:both

bubuko.com,布布扣
<style type="text/css"> 

.left{float:left;}
.right{float:right;}
 
/*清除浮动代码*/
.clearfloat{clear:both}
</style> 
 
<div> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>
bubuko.com,布布扣

缺点:每次清除浮动都加空div,影响了HTML的结构,例如如果要算div的个数,都会被影响到。

2.父级div定义 伪类:after

bubuko.com,布布扣
<style type="text/css"> 

.left{float:left;}
.right{float:right;}
 
.clearfloat:after{
    content:"\200B";/*unicode字符里零宽度空格*/
    display:block;
    height:0;
    clear:both;
}
</style> 
 
<div class="clearfloat"> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
</div>
bubuko.com,布布扣

我更倾向使用这种清除浮动的方式,不增加HTML,浏览器兼容性也好,写法在我看来也简洁。

PS:不过如果要兼容IE6、IE7,就需要加多个zoom:1。

CSS之浮动那些事,布布扣,bubuko.com

CSS之浮动那些事

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/lovesong/p/3762296.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!