플 로 팅 제거

여기 서 부동 을 제거 하 는 세 가지 방법 을 소개 한다.
방법 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
방법 3:
.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;
	  }

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

좋은 웹페이지 즐겨찾기