float 해제하는 방법

float을 해제하는 방법

방법	풀이
1	float된 박스들의 바로 다음 박스에 clear:both;한다 - 바로 다음에 박스가 없으면 사용할 수 없다
2	float된 박스들을 감싸는 박스를 다시 floatLleft;한다 - 그 float까지 연쇄적으로 해제해야하면 width값을 주어야 크로스브라우징된다.
3	float된 박스들을 감싸는 박스에 overflow:auto/overflow:hidden한다 - 세로 스크롤바가 생길 경우 사용할 수 없으면 width값을 주어야 크로스브라우징 된다.
4	float된 박스들을 감싸는 박스에 height값을 준다 본문내용엔 높이를 주지 않으므로 세로 사이즈가 불변일 경우가 아니면 사용이 불가능
5	float된 박스들을 감싸는 박스에 가상요소 :after를 주어 해제한다. - width값을 주어야 크로스 브라우징된다

출처 : http://blog.naver.com/leeminji25/130176619763

but

가장 좋은 방법은

html

1 2 3 4

<div id="container">     <div id="left">left</div>     <div id="contents">contents</div> </div>

2 css

1 2 3 4

#container:after {content:''; display:block; height:0; clear:both;} *:first-child+html #container {min-height:1px;} /*IE7*/ #left {float:left;} #contents {float:right;}