cssフローティングをクリアする5つの方法

753 ワード

1.追加ラベル法

2.父级添加overflow属性方法

       : overflow  hidden|auto|scroll      。

3.after擬似要素を使用してフローティングをクリアする
.clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   
 .clearfix {*zoom: 1;}   ie6、7   

4.after擬似要素空白文字法
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.

5.beforeとafterの二重擬似要素を使用してフローティングをクリアする
.clearfix:before,.clearfix:after{ 
           content:".";
           display:table;
   }
.clearfix:after{
 clear:both;
}
.clearfix{*zoom:1;}