티스토리 뷰


레어아웃 제작할때 Float 기반으로 많이 작성하는데요.


float 클리어 하는 여러 방법이 있어서 소개합니다.


출처 :  http://www.paulund.co.uk/css-clearing-floats-snippet


데모 : http://jsfiddle.net/teddyrised/t5ynw/


.clearfix:after {  /* für Firefox, IE8, Opera, Safari, etc. */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* + html .clearfix { /* for IE7 */
    display: inline-block;
}
* html .clearfix { /* for IE6 */
	height: 1%;
}


-------------------------



/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}


<div class="clearfix">
</div>


Clearfix With Overflow:hidden




저작자 표시
신고
댓글
댓글쓰기 폼