clear 속성

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

구문

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

예제

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

html<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>

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

Результат:

예제

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

html<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>

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

Результат:

예제

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

html<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>

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

Результат:

함께 보기