码迷,mamicode.com
首页 > 其他好文 > 详细

.clearfix:after 清除浮动

时间:2015-04-11 13:02:57      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:

.clearfix:after {content: " "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; font-size: 0;}
.clearfix{*zoom:1;}


各个属性解释:
.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容; 
content: ""; <----内容。 
display: block; <----加入的这个元素转换为块级元素。 
clear: both; <----清除左右两边浮动。 
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已; 
line-height: 0; <----行高为0; 
height: 0; <----高度为0; 
font-size:0; <----字体大小为0,能避免很多空行的BUG; 

.clearfix { *zoom:1;} <----这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。 

.clearfix:after 清除浮动

标签:

原文地址:http://www.cnblogs.com/yaser/p/4417289.html

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