clear 속성

clear 속성은 float 속성으로 지정된 다른 요소들의 흐름을 취소합니다. 다음 값들을 가질 수 있습니다: none (자체 효과를 취소함), both (왼쪽과 오른쪽 동시에 float를 취소함), left (왼쪽 float를 취소함), right (오른쪽 float를 취소함).

구문

선택자 {
	clear: none 또는 left 또는 right 또는 both
}

예제

이미지 왼쪽의 텍스트 흐름을 취소해 보겠습니다:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: left;
	padding-right: 10px;
}
.txt {
	clear: left;
}

예제

이제 이미지 오른쪽의 텍스트 흐름을 취소해 보겠습니다:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: right;
}

예제

clear 속성 자체의 효과를 취소해 보겠습니다:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: none;
}

함께 보기

요소 하단 가장자리의 위치를 지정하는 속성 bottom,
요소 상단 가장자리의 위치를 지정하는 속성 top,
요소 왼쪽 가장자리의 위치를 지정하는 속성 left,
요소 오른쪽 가장자리의 위치를 지정하는 속성 right,
첫 번째 요소 뒤의 위치를 지정하는 의사 요소 ::backdrop,
테이블 캡션의 위치를 지정하는 속성 caption-side,