float을 clear 하는 방법들.

float을 clear 하는 방법

float을 clear 하는 방법은 여러가지가 있다.

1. float에 float으로 대응하는 방법

2. float에 overflow 속성으로 대응하는 방법

3. float 뒤에 빈 엘리먼트를 삽입하여 clear 하는 방법

4. float에 가상 선택자 :after로 clear 하는 방법

5. float을 display:inline-block 으로 clear 하는 방법

1. float에 float으로 대응하는 방법

– 자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모에게도 float 속성을 부여하는 방법. 부모에게 float 속성을 부여하게 되면 부모엘리먼트는 자식 엘리먼트의 높이를 반영하지만 부모 엘리먼트의 너비는 float된 두 자식의 너비를 담을만큼만 작게 줄어들게 되는데, 부모의 너비가 브라우저 크기에 따라 가변적이어야 하는 경우에 적용하기 어렵다. 또한 조상 엘리먼트들이 겹겹이 존재하는 경우 자식의 높이를 조상 엘리먼트에게 각각 전달하기 위하여 조상 엘리먼트들을 모두 float 시켜야 하므로 일반적으로는 사용하지 않는 편이 좋음.

float에 float으로 대응하는 방법 예제

#headerexam {clear:both;}

#containerexam {float:left;}

#lnbexam {float:left;}

#contentexam {float:right;}

#footerexam {clear:both;}

2. float에 overflow 속성으로 대응하는 방법

– 자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모 엘리먼트에 overflow:auto 또는 overflow:hidden 속성을 부여하는 방법. overflow:auto 속성은 자식의 너비가 가변적이고 부모의 너비보다 커지는 상황이 발생할 때 가로 스크롤바를 유발하기 때문에 일반적으로 권장하지 않음. overflow:hidden 속성은 그러한 상황에서 가로 스크롤바를 유발하지는 않지만 자식의 너비가 넘치는 경우 넘치는 부분이 잘리기 때문에 이 역시 완전하게 안전한 방법은 아니다.

float에 overflow 속성으로 대응하는 방법

#headerexam {clear:both;}

#containerexam {overflow:hidden;}

#lnbexam {float:left;}

#contentexam {float:right;}

#footerexam {clear:both;}

3. float 뒤에 빈 엘리먼트를 삽입하여 clear 하는 방법

– 이 방법은 #containerexam 영역이 끝나기 직전 빈 엘리먼트를 넣고 빈 엘리먼트에 clear:both 속성을 부여하여 부모가 자식의 높이를 인식하도록 하는 방법. 하지만 의미 없는 빈 엘리먼트를 사용하기 때문에 간편하긴 하지만 이 역시 권장되는 방법은 아니다.

float을 빈 엘리먼트로 clear 하는 방법 예제

#headerexam {clear:both;}

#containerexam {float:none;}

#lnbexam {float:left;}

#contentexam {float:right;}

.clear {clear:both;}

#footerexam {clear:both;}

4. float에 가상 선택자 :after로 clear 하는 방법

– 가장 탁월하다고 생각하는 방법. 가상 선택자란 :link, :visited, :hover, :active, :focus와 같은 것들을 말하는데, ‘가상 선택자’는 다시 ‘가상 클래스‘와 ‘가상 엘리먼트‘로 구분할 수 있다. ‘가상 클래스‘는 특정 엘리먼트에 대하여 아무런 class를 부여하지 않았지만 마치 역동적으로 class를 변경한것과 같은 효과를 낼 수 있는 것들로서 이미 존재하는 엘리먼트에 조합해서 사용할 수 있다.  :link, :visited, :hover, :active, :focus, :first-child가 가상 클래스에 해당된다.

  한편 ‘가상 엘리먼트‘란, 존재하지 않는 엘리먼트를 가상으로 생성해내는 선택자로서 :first-line, :first-letter, :before, :after가 있다.    심지어 :before와 :after는 HTML문서상에 존재하지 않는 콘텐츠를 출력시키기도 한다. 가상의 엘리먼트를 생성 #containerexam:after {contentexam:” “} 시킨 다음 display:block; clear:both 처리를 추가하게 되면 의미 없는 빈 엘리먼트를 사용하지 않으면서도 가상 엘리먼트를 이용하여 깔끔하게 float이 clear 시킬 수 있다.

float을 가상선택자 :after로 clear 하는 방법 예제

#headerexam {clear:both;}

#containerexam {float:none;}

#lnbexam {float:left;}

#contentexam {float:right;}

#footerexam {clear:both;}

상기 예제로부터 가상 엘리먼트가 스스로 높이를 갖지 않고 화면에 보이지 않도록 하려면 아래와 같은 css를 넣어준다.

#containerexam:after {contentexam:””; display:block; clear:both;}

하지만 Internet Explorer는 :before, :after 가상 엘리먼트 선택자를 지원하지 않기 때문에 다음과 같은 Hack이 필요. 

#containerexam {*zoom:1;} /* IE5.5~7 브라우저 대응 Hack */

#containerexam:after {contentexam:” “; display:block; clear:both;} /* 표준계열 브라우저에 대응하는 float 해제용 가상 엘리먼트의 생성 */ 

IE 5~7 브라우저는 hasLayout이라는 고유한 성질을 갖게 되면 float을 해제하는 트리거로 작용하는 성질이 있고 zoom:1 속성이 hayLayout 이라는 성질을 갖도록 하기 때문에 IE 5~7 브라우저 고유의 특징을 이용한 해결방법.

5. float을 display:inline-block 으로 clear 하는 방법

– float된 자식요소들의 높이를 부모에게 전달하는 방법으로써 부모 요소에 display:inline-block 속성을 부여하는 방법. inline-block 속성이 부여된 요소는 float된 자식의 높이만큼 늘어나게 된다. 모든 브라우저가 동일하게 float을 해제하는 방향으로 작용하게 되며, 표준계열 브라우저들은 부모 요소의 너비가 자식의 너비만큼 알맞게 줄어들지만 IE 6~7 브라우저는 100%의 너비를 갖게 되는 특징이 있다. 또한 inline-block 속성을 갖게 된 요소는 인라인 요소와 마찬가지로 박스가 끝나는 지점에 약 4px 정도의 공백을 갖게 되므로 유의해야 한다.

http://naradesign.net/wp/2008/05/27/144/ 에서 발췌.

댓글 남기기