Float 클리어 하는 여러가지 방법

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