티스토리 뷰


레어아웃 제작할때 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




댓글
D-DAY
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함