首页 > 代码库 > CSS之浮动那些事
CSS之浮动那些事
1.清除浮动
下面是两种常用的方式,而这两招也够用了(不用千招会,只需一招精)。
1.结尾处加空div标签 clear:both
<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>
缺点:每次清除浮动都加空div,影响了HTML的结构,例如如果要算div的个数,都会被影响到。
2.父级div定义 伪类:after
<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>
我更倾向使用这种清除浮动的方式,不增加HTML,浏览器兼容性也好,写法在我看来也简洁。
PS:不过如果要兼容IE6、IE7,就需要加多个zoom:1。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。