clear속성

float

float 속성을 사용하는 경우 float속성을 적용하지 않은 다음태그와 겹치는 문제가 발생할 수 있다.

이는 clear속성을 이용하여 해결할 수 있다.

clear: left 좌측에 태그가 삽입안됨
clear: right 우측에 태그삽입 안됨
clear: both 양측에 태그삽입안되므로 밑으로 삽입됨

after 가상 선택자

clear하기위해 float요소 다음에 clear태그를 삽입하는 불편함을 방지하기위해 가상 클래스 선택자를 이용하여 문제를 해결할 수 있다.

<style type="text/css">
	.clearfix{ *zoom: 1; }
	.clearfix:after{ content: ""; display: block; clear: both }
</style>
<div class="box-container clearfix">
	<div class="box" style="float: left">박스1</div>
	<div class="box" style="float: right">박스2</div>
</div>
<div>박스 아래에 나타나야 하는 내용</div>

after가상선택자는 IE8이하에서 동작하지 않는데 컨테이너 태그에 *zoom:1이라는 옵션을 적용하면 문제가 해결된다.