清除浮动-clearfix的原理

发表于

:after
:after的意思就是在此元素后面添加一个元素，里面的样式就是后面元素的样式，相当于在当前元素后面插入一个div；如果不考虑兼容性和美观性问题的话只需要这样写就可以了

1
clearfix:after { clear:both }

其他属性描述：

  • visibility: hidden; 隐藏，为了美观当然要隐藏掉这个元素了
  • display: block; 块级方式，如果不设置的话有的浏览器默认display的属性不是block，比如ie6
  • font-size: 0;content: ” “;height: 0; 这些为了把高度去掉，不然浏览器会给空白字符留高度的
  • height: 1%;zoom:1; 这个主要就是针对ie6了 尤其是zoom:1可以把div变成haslayout属性。
1
2
3
4
5
6
7
8
9
10
.clearfix:after { 
	content: "."; /**//*内容为“.”就是一个英文的句号而已。也可以不写。*/ 
	display: block; /**//*加入的这个元素转换为块级元素。*/ 
	clear: both; /**//*清除左右两边浮动。*/ 
	visibility: hidden; /**//*可见度设为隐藏。注意它和	display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/ 
	line-height: 0; /**//*行高为0；*/ 
	height: 0; /**//*高度为0；*/ 
	font-size:0; /**//*字体大小为0；*/ 
} 
.clearfix { *zoom:1;} /**//*这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/