清除浮动

原创
2013/09/30 04:37
阅读数 88

这里介绍三种清除浮动的方法:

方法1:

我们html结构

<div class="A clearfix">
    	<div class="C floatLeft">
    		
    	</div>
    	<div class="B floatLeft">
    		
    	</div>
    	<div class="D floatLeft"></div>
    </div>
css
        .C{
		height:100px;
		width:100px;
		background:#eee;
	}
	.floatLeft{
		float:left;
	}
	.B{
		height:50px;
		width:70px;
		background:#0fcd4e;
	}
	.D{
		height:110px;
		width:50px;
		background:#f35ded;
	}
	.A{
		background:#aaa;
		border: 1px solid #111;
	}
   
      .clearfix:before,
      .clearfix:after {
          content:"";
          display:table;
      }
     .clearfix:after {
         clear:both;
         overflow:hidden;
      }
     .clearfix {
        zoom:1; /* IE < 8 */
     }

方法2:


<div class="A">
    	<div class="C floatLeft">
    		
    	</div>
    	<div class="B floatLeft">
    		
    	</div>
    	<div class="D floatLeft"></div>
    	<div class="clear"></div>
    </div>
css



.C{
		height:100px;
		width:100px;
		background:#eee;
	}
	.floatLeft{
		float:left;
	}
	.B{
		height:50px;
		width:70px;
		background:#0fcd4e;
	}
	.D{
		height:110px;
		width:50px;
		background:#f35ded;
	}
	.A{
		background:#aaa;
		border: 1px solid #111;
	}
	.clear {
	    clear:both;/*主要使用这个属性来清除浮动*/
	    /*为了不让ie具有一定的空间,个人建议加上下面三个属性*/
	    height: 0;
	    line-height: 0;
	    font-size: 0;
	  }
方法3:


<div class="A">
    	<div class="C floatLeft">
    		
    	</div>
    	<div class="B floatLeft">
    		
    	</div>
    	<div class="D floatLeft"></div>
    </div>


css


.C{
		height:100px;
		width:100px;
		background:#eee;
	}
	.floatLeft{
		float:left;
	}
	.B{
		height:50px;
		width:70px;
		background:#0fcd4e;
	}
	.D{
		height:110px;
		width:50px;
		background:#f35ded;
	}
	.A{
		background:#aaa;
		
		border: 1px solid #111;
		overflow: auto;
	}
	
	
   * html .A {
      zoom: 1; /* IE5-6 */
   }


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部