개요
float 속성으로 텍스트와 이미지를 배치 시킬 때는 문제가 없지만 div 태그 등을 배치 시킬 때는 상위 태그가 높이 값이 float를
적용한 하위 태그의 높이를 반영하지 않아 이상하게 된다.
다음요소가 float에 영향을 받지 않고 일반적인 레이아웃을 사용하게 하기 위한 여러 방법이 있는데 그 중
float를 준 태그 다음에 clear속성을 준 요소를 삽입하는 방법이 가장 쉽다.
사용법
<div style="float:left">asdf</div> <div style="clear:both"></div>
clear 속성 값에 "both"을 적용하면 float의 left, right 모두 제거된다.
css혹은 style속성에서 float를 사용한 후 마지막 객체에 clear속성을 지닌 태그를 일일이 추가시키는 방법대신
after 가상 선택자를 이용하면 더 편리하게 관리 할 수 있다.
사용법
#container1{ float:left; } #container1:after{ content:""; display:block; clear:both; }
예제
<html> <head> <style> #container1:after{ content:""; display:block; clear:both } #container1 #ex1{ float:left; witdh:50px; height:50px; background-color:#CCC; } #container1 #ex2{ float:right; witdh:50px; height:50px; background-color:#AAA; } </style> </head> <body> <div id="container1"> <div id="ex1">ex1</div> <div id="ex2">ex2</div> </div> <span>cleared!</span> </body> </html>
출력 결과:
ex1
ex2
clear 속성 미적용시
<html> <head> <style> #container2 #ex3{ float:left; witdh:50px; height:50px; background-color:#CCC; } #container2 #ex4{ float:right; witdh:50px; height:50px; background-color:#AAA; } </style> </head> <body> <div id="container2"> <div id="ex3">ex3</div> <div id="ex4">ex4</div> </div> <span>not cleared</span> </body> </html>
출력 결과:
ex3
ex4
IE8 이하 호환
ie8 (Internet Explorer 8) 이하는 :after 가상 선택자가 먹지 않기 때문에 :after을 이용한 clear 가 적상적으로 작동하지 않는다
이때, *zoom:1 이라는 속성을 사용하면 clear 된 것 같은 효과를 낼 수 있다.
사용법
#container1{ *zoom:1 } #container1:after{ content:""; display:block; clear:both }