float 해제 방법

* float의 문제점 *

부모 요소가 자식 요소의 크기를 반영하지 못하는 문제가 생긴다.

float을 해체하는 다양한 방법과 원리

 1. 자식이 float을 가지고 있으면 부모도 float으로 대응한다.

 2. overflow:auto와 overflow:hidden 속성으로 대응한다.

  2-1. overflow:auto 속성은 자식의 너비가 가변적이고 부모의 너비보다 커지는 상황이 발생할 때 가로 스크롤바를 유발한다.

  2-2 .overflow:hidden 속성은 가로 스크롤바를 유발하지는 않지만 자식의 너비가 넘치는 경우 그 부분을 따로 잘라내야 한다.

 3. 빈 엘리먼트로 clear 하는 방법

  역역이 끝나기 직전에 빈 엘리먼트를 넣고 clear:both 속성을 부여하여 부모가 자식의 높이를 인식하게 하는 방법이다. 하지만 의미 없는 빈 엘리먼트를 사용하기 떄문에 권장되는 방법이 아니다. 또한 실무에서는 보통 .clear{clear:both; height:0; overflow:hidden;}으로 처리하여 .clear라는 빈 엘리먼트가 스스로 높이를 갖지 않도록 하고 보이자 않도록 처리 한다.

 4. 가상 선택자 ::after로 clear 하는 방법 (권장)

  ::after{content:"", display:block, clear:both;} IE6~7에서는 가상선택자를 사용할 수 없는데 그 떈 {*zoom:1} 을 추가한다.

 

 

 

 5. diplay:inline-block으로 clear 하는 방법

  부모 요소에 display:inline-block 속성을 부여하는 방법이 있습니다. 속성이 부여된 요소는 float된 자식의 높이만큼 늘어난다. 다만 IE 6~7 브라우저는 박스가 끝나는 지점에 약 4px 공백을 가진다.