当前位置:Web前端 > css> 正文

css用clearfix清除浮动

时间:2013-11-4类别:Web前端

css用clearfix清除浮动

css用clearfix清除浮动

什么是.clearfix

 

  • CSS 代码   复制
  • 
    .clearfix:after {
      content: " ";
      display: block;
      clear: both;
      height: 0;
    }
    .clearfix {
      zoom: 1;
    }
    
    <li class="clearfix">
      <li class="floated"></li>
    </li>
    
    		
  •  

    上述代码说明:

  •  
  • CSS 代码   复制
  • 
    .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的元素可以清除浮动来包裹内部元素。*/
    
    		
  •  

    上面的代码就是.clearfix的定义和应用,简单的说下.clearfix的原理:

     

    1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。

    2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。

    3、在需要清除浮动的时候,只要写一个.clearfix就行了,然后在需要清浮动的元素中 添加clearfix类名就好了。

     

    实例:

  •  
  • HTML 代码   复制
  • 
    
    <html > 
    <head> 
    <title> css用clearfix清除浮动实例</title> 
    <meta name="generator" content="editplus" /> 
    <meta name="author" content="" /> 
    <meta name="keywords" content="" /> 
    <meta name="description" content="" /> 
    </head> 
    <body> 
    <style type="text/css"> 
    /*所有主流浏览器都支持 :after 伪元素。*/ 
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} 
    .clearfix{*+height:1%;}/*不知道有什么用处,不加ie7也没有问题*/ 
    .box{ background:#111;width:500px; position:relative;} 
    .l{float:left; background:#333;width:200px; height:100px;} 
    .r{float:right;background:#666;width:200px; height:200px;} 
    .s{width:100px; height:100px;background:#999;position:absolute;right:-50px;;} 
    </style> 
    <li class="box clearfix"> 
    <li class="l">left</li> 
    <li class="r">right</li> 
    <li class="s">absolute</li> 
    </li> 
    </body> 
    </html> 
    			

     

  •  

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐